(UI/STYLE): Implemented the UI design for the recently viewed list.

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

@@ -36,8 +36,119 @@
       </svg>
     </section>
     
+<!-- Section: Viewed Recently -->
+    <section class="w-full flex flex-col my-4">
+      <h2 class="text-md text-white my-2">
+        Recently Viewed
+      </h2>
+      
+<!-- List: Recent Views-->
+      <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-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">
+              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-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>
+        </ul>
+      </div>
+    </section>
+    
 <!-- Section: Make Again -->
-    <section class="w-full flex flex-col">
+    <section class="w-full flex flex-col my-4">
       <h2 class="text-md text-white my-2">
         Make again
       </h2>

spec/TechnicalSpecification.md

@@ -40,7 +40,7 @@ well as view lists of recently made recipes, and other (**undetermined**) lists.
     - [ ] **Filter by difficulty** - *1 to 5 stars*
     -  [ ] **Filter by serving size** - *1 to 16*
 
-- [ ] Make again list
+- [ ] Recently Viewed list
     - [ ] Scrolling list of the most recent 5-10 recipes viewed
     - [ ] **Display recipe details** - Title, duration, **image***, and a heart to like the recipe