From 520a2aa56621cacbfd469eb0f15b0375ef89a3ed Mon Sep 17 00:00:00 2001
From: drusepth <drusepth@gmail.com>
Date: Fri, 15 Apr 2022 16:46:30 -0700
Subject: [PATCH] add empty state styling for content#index

---
 app/views/content/index.html.erb | 58 ++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/app/views/content/index.html.erb b/app/views/content/index.html.erb
index 858c68e2..e8425c30 100644
--- a/app/views/content/index.html.erb
+++ b/app/views/content/index.html.erb
@@ -324,25 +324,49 @@
 <%# render partial: 'content/components/list_filter_bar', locals: { content_type: @content_type_class } %>
 
 <%# to be made into new card list partial? %>
-<div class="flex flex-wrap mb-32 container mx-auto">
-  <% @content.each do |content| %>
-    <div class="xl:w-1/4 md:w-1/2 p-2 group">
-      <%= link_to content.view_path do %>
-        <div class="bg-white hover:shadow-lg rounded-lg transition">
-          <%= image_tag content.random_image_including_private(format: :small), class: 'h-64 rounded-t w-full object-cover object-center mb-6' %>
-          <div class="pl-4 pb-1">
-            <i class="material-icons float-right text-2xl mr-3">star_outline</i>
-            <h3 class="tracking-widest <%= content.text_color %> text-xs uppercase font-medium title-font">
-              <%= content.page_type %>
-            </h3>
-            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">
-              <%= content.name %>
-            </h2>
+<% if @content.any? %>
+  <div class="flex flex-wrap mb-32 container mx-auto">
+    <% @content.each do |content| %>
+      <div class="xl:w-1/4 md:w-1/2 p-2 group">
+        <%= link_to content.view_path do %>
+          <div class="bg-white hover:shadow-lg rounded-lg transition">
+            <%= image_tag content.random_image_including_private(format: :small), class: 'h-64 rounded-t w-full object-cover object-center mb-6' %>
+            <div class="pl-4 pb-1">
+              <i class="material-icons float-right text-2xl mr-3">star_outline</i>
+              <h3 class="tracking-widest <%= content.text_color %> text-xs uppercase font-medium title-font">
+                <%= content.page_type %>
+              </h3>
+              <h2 class="text-lg text-gray-900 font-medium title-font mb-4">
+                <%= content.name %>
+              </h2>
+            </div>
           </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<% if @content.empty? %>
+  <div class="container mx-auto flex">
+    <div class="w-1/2 text-center p-6">
+      <button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        <i class="material-icons text-6xl <%= @content_type_class.text_color %>">list</i>
+        <div class="mt-2 block text-sm font-medium text-gray-900 mb-1">
+          Customize your <%= @content_type_name.downcase %> page template
         </div>
-      <% end %>
+        <span class="rounded bg-notebook-blue text-white px-2 py-1 text-xs">
+          recommended before creating your first <%= @content_type_name.downcase %>
+        </span>
+      </button>
     </div>
-  <% end %>
-</div>
+    <div class="w-1/2 text-center p-6">
+      <button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        <i class="material-icons text-6xl <%= @content_type_class.text_color %>"><%= @content_type_class.icon %></i>
+        <span class="mt-2 block text-sm font-medium text-gray-900">Create your first <%= @content_type_name.downcase %></span>
+      </button>
+    </div>
+  </div>
+<% end %>
 
 <%= render partial: 'javascripts/content_linking' %>
\ No newline at end of file