(STYLE/UI): Implemented a simple search and make again list.

These are simple, but look pretty decent. Calling it for the night.

lib/potion_web/components/layouts/dashboard.html.heex

@@ -6,8 +6,14 @@
     <div class="w-full h-1/3 bg-background-200 bg-opacity-60 shadow-background-200 shadow-2xl absolute -z-20 rounded-b-[100%]" />
   </div>
 
+  <header class="w-full flex items-center justify-center py-5">
+    <h1 class="text-white font-semibold">
+      Potion - Recipe Database
+    </h1>
+  </header>
+  
 <!-- Section: Content -->
-  <main class="flex-grow max-h-screen">
+  <main class="w-full flex-grow max-h-screen overflow-y-auto overflow-x-hidden z-10">
     {@inner_content}
   </main>
   

lib/potion_web/controllers/page_html/home.html.heex

@@ -1,5 +1,150 @@
+<!--
 <div class="text-white my-5">
   <h1 class="text-xl">
     Page: <span class="font-bold">{@current_page}</span>
   </h1>
 </div>
+-->
+
+<div class="w-full h-full">
+  
+<!-- Container: Page -->
+  <div class="w-full h-full flex flex-col p-4">
+    
+<!-- Section: Search -->
+    <section class="w-full h-fit flex items-center justify-center gap-x-5 my-8">
+      <input
+        type="search"
+        name="search-bar"
+        id="search-bar"
+        placeholder="Search recipe, food group, idea"
+        class="w-full bg-background-300 border-none rounded-md text-white placeholder:italic
+         focus:outline-none focus:ring-2 focus:ring-primary-200 focus:ring-offset-2 focus:ring-offset-background-300"
+      />
+      <svg
+        class="h-9 text-primary-400"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M19 4V10M19 10C17.8954 10 17 10.8954 17 12C17 13.1046 17.8954 14 19 14M19 10C20.1046 10 21 10.8954 21 12C21 13.1046 20.1046 14 19 14M19 14V20M12 4V16M12 16C10.8954 16 10 16.8954 10 18C10 19.1046 10.8954 20 12 20C13.1046 20 14 19.1046 14 18C14 16.8954 13.1046 16 12 16ZM5 8V20M5 8C6.10457 8 7 7.10457 7 6C7 4.89543 6.10457 4 5 4C3.89543 4 3 4.89543 3 6C3 7.10457 3.89543 8 5 8Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+      </svg>
+    </section>
+    
+<!-- Section: Make Again -->
+    <section class="w-full flex flex-col">
+      <h2 class="text-md text-white my-2">
+        Make again
+      </h2>
+      
+<!-- List: Recent Recipes -->
+      <div class="overflow-x-auto whitespace-nowrap">
+        <ul class="inline-flex space-x-4">
+          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
+            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
+            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
+              Avacado Toast
+            </p>
+
+            <div class="flex items-center justify-between w-full text-xs">
+              <p>10 min</p>
+              <svg
+                class="h-6 text-red-500"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <!-- Hollow -->
+                <!-- <path -->
+                <!--   fill-rule="evenodd" -->
+                <!--   clip-rule="evenodd" -->
+                <!--   d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z" -->
+                <!--   stroke="currentColor" -->
+                <!--   stroke-width="2" -->
+                <!--   stroke-linecap="round" -->
+                <!--   stroke-linejoin="round" -->
+                <!-- /> -->
+                <!-- Filled -->
+                <path
+                  d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </li>
+
+          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
+            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
+            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
+              Fried Chicken
+            </p>
+
+            <div class="flex items-center justify-between w-full text-xs">
+              <p>90 min</p>
+              <svg
+                class="h-6 text-white"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <!-- Hollow -->
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <!-- Filled -->
+                <!-- <path -->
+                <!--   d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z" -->
+                <!--   fill="currentColor" -->
+                <!-- /> -->
+              </svg>
+            </div>
+          </li>
+
+          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
+            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
+            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
+              Steak & Eggs
+            </p>
+
+            <div class="flex items-center justify-between w-full text-xs">
+              <p>15 min</p>
+              <svg
+                class="h-6 text-white"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <!-- Hollow -->
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <!-- Filled -->
+                <!-- <path -->
+                <!--   d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z" -->
+                <!--   fill="currentColor" -->
+                <!-- /> -->
+              </svg>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</div>