Ase a#232 otshepeng mobile view in recipe card

components/Cards/FavCard.jsx

@@ -1,106 +1,105 @@
 /* eslint-disable consistent-return */
-import React, { useContext } from 'react';
+import React, { useContext } from "react";
 
-import Image from 'next/legacy/image';
-import { toast } from 'react-toastify';
+import Image from "next/legacy/image";
+import { toast } from "react-toastify";
 
 import {
   StarIcon as StarEmpty,
   StarIcon as StarFilled,
-} from '@heroicons/react/24/solid';
-import Link from 'next/link';
-import FavoritesContext from '../Context/Favorites-context';
-import { useTheme } from '../Context/ThemeContext';
+} from "@heroicons/react/24/solid";
+import Link from "next/link";
+import FavoritesContext from "../Context/Favorites-context";
+import { useTheme } from "../Context/ThemeContext";
 
 const FavCard = ({ recipe, favorites }) => {
   const favoriteCtx = useContext(FavoritesContext);
   const { theme } = useTheme();
   const recipeIsFavorite = favoriteCtx.recipeIsFavorite(recipe._id, favorites);
 
   const removeFavoriteHandler = async () => {
-    const userConfirmed = window.confirm('Are you sure you want to remove this recipe from your favorites?');
+    const userConfirmed = window.confirm(
+      "Are you sure you want to remove this recipe from your favorites?"
+    );
     if (userConfirmed) {
       try {
         const response = await fetch(`api/recipes/Favourites`, {
-          method: 'DELETE',
+          method: "DELETE",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
           body: JSON.stringify({ recipeId: recipe._id }),
         });
 
         if (response.ok) {
           favoriteCtx.removeFavorite(recipe._id);
-          toast.success('Recipe removed from favorites!');
+          toast.success("Recipe removed from favorites!");
         }
       } catch (error) {
-        toast.error('Error removing recipe from favorites.');
+        toast.error("Error removing recipe from favorites.");
         return error("Error removing favorite:", error);
       }
     }
   };
 
-  const firstImage = recipe.images && recipe.images.length > 0 ? recipe.images[0] : null;
+  const firstImage =
+    recipe.images && recipe.images.length > 0 ? recipe.images[0] : null;
 
   return (
-    <>
-      <div
-        className={`${
-          theme === "dark" ? "text-custom-color-mixed-20" : "text-blue-black-10"
-        } bg-blue-400 rounded-lg shadow-lg overflow-hidden mr-4`}
-      >
-        <div className="relative h-40 overflow-hidden">
-          {firstImage ? (
-            <Image
-              src={firstImage}
-              alt={recipe.title}
-              layout="fill"
-              objectFit="cover"
-              className="rounded-t-lg"
-            />
+    <div
+      className={`${
+        theme === "dark"
+          ? "text-custom-color-mixed-20 bg-gray-700"
+          : "text-blue-black-10 bg-blue-300"
+      } rounded-lg shadow-lg overflow-hidden pb-3`}
+    >
+      <div className="relative h-40 overflow-hidden">
+        {firstImage ? (
+          <Image
+            src={firstImage}
+            alt={recipe.title}
+            layout="fill"
+            objectFit="cover"
+            className="rounded-t-lg"
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full bg-gray-300 text-gray-600">
+            No Image
+          </div>
+        )}
+      </div>
+      <div className="flex flex-col justify-between h-16 p-4">
+        <div className="text-center">
+          <h3 className="text-lg font-semibold">{recipe.title}</h3>
+        </div>
+        <div className="flex items-center justify-end">
+          {recipeIsFavorite ? (
+            <button
+              type="button"
+              onClick={removeFavoriteHandler}
+              className={` 
+                ${
+                  theme === "light" ? "text-blue-900" : "text-blue-500"
+                } hover:text-red-500 transition`}
+            >
+              <span aria-label="Remove from favorites">
+                <StarFilled className="w-6 h-6" />
+              </span>
+            </button>
           ) : (
-            <div className="flex items-center justify-center h-full bg-gray-300 text-gray-600">
-              No Image
-            </div>
+            <button
+              type="button"
+              onClick={removeFavoriteHandler}
+              className="text-custom-blue-10 hover:text-blue-500 transition"
+            >
+              <span aria-label="Add to favorites">
+                <StarEmpty className="w-6 h-6" />
+              </span>
+            </button>
           )}
         </div>
-        <div className="flex flex-col justify-between h-16 p-4">
-          <div className="text-center">
-            <h3 className="text-lg font-semibold">{recipe.title}</h3>
-          </div>
-          <div className="flex items-center justify-end">
-            {recipeIsFavorite ? (
-              <button
-                type="button"
-                onClick={removeFavoriteHandler}
-                className={` 
-                text-blue-900 hover:text-red-500 transition`}
-              >
-                <span aria-label="Remove from favorites">
-                  <StarFilled className="w-6 h-6" />
-                </span>
-              </button>
-            ) : (
-              <button
-                type="button"
-                onClick={removeFavoriteHandler}
-                className="text-custom-blue-10 hover:text-blue-500 transition"
-              >
-                <span aria-label="Add to favorites">
-                  <StarEmpty className="w-6 h-6" />
-                </span>
-              </button>
-            )}
-          </div>
-        </div>
       </div>
-      <Link
-        legacyBehavior
-        href={`/favorites/similar-recipes/${recipe.title}`}
-      >
-        View similar recipes
-      </Link>
-    </>
+    </div>
   );
 };
 

components/RecipesList/RecipeList.jsx

@@ -338,13 +338,14 @@ function RecipeList() {
                 No favorite recipes yet.
               </p>
             ) : (
-              <div className="mt-4">
+              <div className="mt-6 ">
                 <Carousel
                   responsive={responsive}
                   containerClass="carousel-container"
+                  className="m-3 bg-[linear-gradient(180deg,transparent,#38487875,transparent)]"
                 >
                   {favorites.map((recipe) => (
-                    <div key={recipe.recipe._id}>
+                    <div key={recipe.recipe._id} className="m-3">
                       <FavCard recipe={recipe.recipe} favorites={favorites} />
                     </div>
                   ))}

pages/favorites/index.jsx

@@ -7,22 +7,19 @@
  * @component
  * @returns {JSX.Element} - Rendered FavoritesPage component.
  */
-import React, {
-  useContext,
-  useEffect,
-  useState,
-  useMemo,
-} from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import useSWR from 'swr';
+import React, { useContext, useEffect, useState, useMemo } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import useSWR from "swr";
 import Fuse from "fuse.js";
 import { v4 as KeyUUID } from "uuid";
-import RecipeCard from '../../components/Cards/RecipeCard';
-import FavoritesContext from '../../components/Context/Favorites-context';
-import Loading from '../../components/Loading/Loading';
+import RecipeCard from "../../components/Cards/RecipeCard";
+import FavoritesContext from "../../components/Context/Favorites-context";
+import Loading from "../../components/Loading/Loading";
+import { useTheme } from "../../components/Context/ThemeContext";
 
 function FavoritesPage() {
+  const theme = useTheme();
   const favoriteCtx = useContext(FavoritesContext);
   const [filteredRecipes, setFilteredRecipes] = useState([]);
   const [sortOrderTitle, setSortOrderTitle] = useState("asc");
@@ -40,7 +37,7 @@ function FavoritesPage() {
 
   const { data: favoritesData, error: recipesError } = useSWR(
     "/api/recipes/Favourites",
-    fetcher,
+    fetcher
   );
 
   const favoriteRecipes = favoriteCtx.favorites || [];
@@ -102,13 +99,20 @@ function FavoritesPage() {
     const sortedRecipes = [...filteredRecipes].sort((a, b) => {
       if (sortType === "title") {
         return sortOrder1 * a.recipe.title.localeCompare(b.recipe.title);
-      } if (sortType === "prepTime") {
+      }
+      if (sortType === "prepTime") {
         return sortOrder1 * (a.recipe.prep - b.recipe.prep);
-      } if (sortType === "cookTime") {
+      }
+      if (sortType === "cookTime") {
         return sortOrder1 * (a.recipe.cook - b.recipe.cook);
-      } if (sortType === "steps") {
-        return sortOrder1 * (a.recipe.instructions.length - b.recipe.instructions.length);
-      } if (sortType === "totalTime") {
+      }
+      if (sortType === "steps") {
+        return (
+          sortOrder1 *
+          (a.recipe.instructions.length - b.recipe.instructions.length)
+        );
+      }
+      if (sortType === "totalTime") {
         const aTotalTime = a.recipe.prep + a.recipe.cook;
         const bTotalTime = b.recipe.prep + b.recipe.cook;
         return sortOrder1 * (aTotalTime - bTotalTime);
@@ -206,9 +210,15 @@ function FavoritesPage() {
   };
 
   return (
-    <section>
+    <section className="mt-0 pt-6 pb-10">
       <strong>
-        <h1 className="py-10 px-5 bg-blue-400 mx-20 my-10 flex w-full justify-center">My Favorites</h1>
+        <h1
+          className={`py-10 px-5 bg-blue-400 mx-20 my-10 flex w-full justify-center ${
+            theme === "light" ? "text-black" : "text-white"
+          }`}
+        >
+          My Favorites
+        </h1>
       </strong>
       <section className="mx-5">
         {/* Add sorting options here */}
@@ -254,7 +264,6 @@ function FavoritesPage() {
             width={500}
             height={300}
           />
-
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
             {filteredRecipes.map((result) => (
@@ -269,13 +278,27 @@ function FavoritesPage() {
                   href={`/favorites/similar-recipes/${result.recipe.title}`}
                 >
                   {" "}
-                  View similar recipes
+                  <button
+                    type="button"
+                    className="text-lg font-semibold bg-slate-400 rounded-xl p-2 mt-5 hover:bg-slate-50"
+                  >
+                    View similar recipes ⇨
+                  </button>
                 </Link>
               </div>
             ))}
           </div>
         )}
       </section>
+      <br />
+      <br />
+      <br />
+      <Link href="/" className="py-10 px-5 mt-12">
+        <strong className="text-lg bg-sky-600 rounded-xl p-1 hover:bg-sky-400">
+          {" "}
+          Explore Recipes
+        </strong>
+      </Link>
     </section>
   );
 }