9 files changed, 104 insertions, 0 deletions

diff --git a/app/views/categories/_category.html.erb b/app/views/categories/_category.html.erb
new file mode 100644
index 0000000..3c51d8f
--- /dev/null
+++ b/app/views/categories/_category.html.erb
@@ -0,0 +1,17 @@
+<div id="<%= dom_id category %>">
+  <p class="my-5">
+    <strong class="block font-medium mb-1">Name:</strong>
+    <%= category.name %>
+  </p>
+
+  <p class="my-5">
+    <strong class="block font-medium mb-1">Colour:</strong>
+    <%= category.colour %>
+  </p>
+
+  <p class="my-5">
+    <strong class="block font-medium mb-1">Badge foreground colour:</strong>
+    <%= category.badge_foreground_colour %>
+  </p>
+
+</div>
diff --git a/app/views/categories/_category.json.jbuilder b/app/views/categories/_category.json.jbuilder
new file mode 100644
index 0000000..c0950c8
--- /dev/null
+++ b/app/views/categories/_category.json.jbuilder
@@ -0,0 +1,2 @@
+json.extract! category, :id, :name, :colour, :badge_foreground_colour, :created_at, :updated_at
+json.url category_url(category, format: :json)
diff --git a/app/views/categories/_form.html.erb b/app/views/categories/_form.html.erb
new file mode 100644
index 0000000..fec6c3b
--- /dev/null
+++ b/app/views/categories/_form.html.erb
@@ -0,0 +1,32 @@
+<%= form_with(model: category, class: "contents") do |form| %>
+  <% if category.errors.any? %>
+    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
+      <h2><%= pluralize(category.errors.count, "error") %> prohibited this category from being saved:</h2>
+
+      <ul>
+        <% category.errors.each do |error| %>
+          <li><%= error.full_message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="my-5">
+    <%= required_label_tag(form, :name) %>
+    <%= form.text_field :name, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+  </div>
+
+  <div class="my-5">
+    <%= form.label :colour, class: "font-bold" %>
+    <%= form.text_field :colour, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+  </div>
+
+  <div class="my-5">
+    <%= form.label :badge_foreground_colour, class: "font-bold" %>
+    <%= form.text_field :badge_foreground_colour, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+  </div>
+
+  <div class="inline">
+    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+  </div>
+<% end %>
diff --git a/app/views/categories/edit.html.erb b/app/views/categories/edit.html.erb
new file mode 100644
index 0000000..57da660
--- /dev/null
+++ b/app/views/categories/edit.html.erb
@@ -0,0 +1,8 @@
+<div class="mx-auto md:w-2/3 w-full">
+  <h1 class="font-bold text-4xl">Editing category</h1>
+
+  <%= render "form", category: @category %>
+
+  <%= link_to "Show this category", @category, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to "Back to categories", categories_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+</div>
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
new file mode 100644
index 0000000..68911e6
--- /dev/null
+++ b/app/views/categories/index.html.erb
@@ -0,0 +1,21 @@
+<div class="w-full">
+  <% if notice.present? %>
+    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+  <% end %>
+
+  <% content_for :title, "Categories" %>
+
+  <div class="flex justify-between items-center">
+    <h1 class="font-bold text-4xl">Categories</h1>
+    <%= link_to "New category", new_category_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
+  </div>
+
+  <div id="categories" class="min-w-full">
+    <% @categories.each do |category| %>
+      <%= render category %>
+      <p>
+        <%= link_to "Show this category", category, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+      </p>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/categories/index.json.jbuilder b/app/views/categories/index.json.jbuilder
new file mode 100644
index 0000000..aa5baad
--- /dev/null
+++ b/app/views/categories/index.json.jbuilder
@@ -0,0 +1 @@
+json.array! @categories, partial: "categories/category", as: :category
diff --git a/app/views/categories/new.html.erb b/app/views/categories/new.html.erb
new file mode 100644
index 0000000..fae8770
--- /dev/null
+++ b/app/views/categories/new.html.erb
@@ -0,0 +1,7 @@
+<div class="mx-auto md:w-2/3 w-full">
+  <h1 class="font-bold text-4xl">New category</h1>
+
+  <%= render "form", category: @category %>
+
+  <%= link_to "Back to categories", categories_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+</div>
diff --git a/app/views/categories/show.html.erb b/app/views/categories/show.html.erb
new file mode 100644
index 0000000..e38975f
--- /dev/null
+++ b/app/views/categories/show.html.erb
@@ -0,0 +1,15 @@
+<div class="mx-auto md:w-2/3 w-full flex">
+  <div class="mx-auto">
+    <% if notice.present? %>
+      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+    <% end %>
+
+    <%= render @category %>
+
+    <%= link_to "Edit this category", edit_category_path(@category), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%= link_to "Back to categories", categories_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <div class="inline-block ml-2">
+      <%= button_to "Destroy this category", @category, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+    </div>
+  </div>
+</div>
diff --git a/app/views/categories/show.json.jbuilder b/app/views/categories/show.json.jbuilder
new file mode 100644
index 0000000..30e6b47
--- /dev/null
+++ b/app/views/categories/show.json.jbuilder
@@ -0,0 +1 @@
+json.partial! "categories/category", category: @category