style app, use components for cards

lib/cannery_web/live/container_live/index.html.heex

@@ -21,51 +21,20 @@
 
   <div class="flex flex-row flex-wrap">
     <%= for container <- @containers do %>
-      <div
-        id={"container-#{container.id}"}
-        class="px-8 py-4 flex flex-col justify-center items-center
-          border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
-      >
-        <div class="mb-4 flex flex-col justify-center items-center">
-          <h1 class="px-4 py-2 rounded-lg title text-xl">
-            <%= container.name %>
-          </h1>
+      <.container_card container={container}>
+        <%= live_patch to: Routes.container_index_path(@socket, :edit, container),
+                   class: "text-primary-500 link" do %>
+          <i class="fa-fw fa-lg fas fa-edit"></i>
+        <% end %>
 
-          <%= if container.desc do %>
-            <span class="rounded-lg title text-lg">
-              Description: <%= container.desc %>
-            </span>
-          <% end %>
-
-          <span class="rounded-lg title text-lg">
-            Type: <%= container.type %>
-          </span>
-
-          <%= if container.location do %>
-            <span class="rounded-lg title text-lg">
-              Location: <%= container.location %>
-            </span>
-          <% end %>
-        </div>
-
-        <div class="flex space-x-4 justify-center items-center">
-          <%= live_redirect("Show",
-            to: Routes.container_show_path(@socket, :show, container),
-            class: "text-primary-500 link"
-          ) %>
-          <%= live_patch("Edit",
-            to: Routes.container_index_path(@socket, :edit, container),
-            class: "text-primary-500 link"
-          ) %>
-          <%= link("Delete",
-            to: "#",
-            class: "text-primary-500 link",
-            phx_click: "delete",
-            phx_value_id: container.id,
-            data: [confirm: "Are you sure you want to delete #{container.name}?"]
-          ) %>
-        </div>
-      </div>
+        <%= link to: "#",
+             class: "text-primary-500 link",
+             phx_click: "delete",
+             phx_value_id: container.id,
+             data: [confirm: "Are you sure you want to delete #{container.name}?"] do %>
+          <i class="fa-fw fa-lg fas fa-trash"></i>
+        <% end %>
+      </.container_card>
     <% end %>
   </div>
 </div>