src/components/Card.jsx

@@ -1,13 +1,29 @@
 import React from "react";
+import Star from "./Star";
 
-const Card = ({movie}) => {
+const Card = ({ movie, favouriteList, setFavouriteList }) => {
-    const { Title, Year, imdbID, Poster } = movie
+    const { Title, Year, Poster } = movie;
-    console.log("Card", Title, Year, imdbID, Poster)
     return (
-        <div className="h-16 w-10">
+        <div className="relative h-[30vh] w-[10vw] overflow-hidden border rounded-lg border-quadnary bg-secondary">
-            <img src={Poster} alt={Title} className="h-12 w-full" />
+            {favouriteList?.includes(movie) ? (
-            <h6 className="text-quadnary">{Title}</h6>
+                <Star
-            <p className="text-quadnary">{Year}</p>
+                    fill="#FFD700"
+                    favouriteList={favouriteList}
+                    setFavouriteList={setFavouriteList}
+                    movie={movie}
+                />
+            ) : (
+                <Star
+                    favouriteList={favouriteList}
+                    setFavouriteList={setFavouriteList}
+                    movie={movie}
+                />
+            )}
+            <img src={Poster} alt={Title} className="h-[85%] w-full" />
+            <div className="flex justify-between px-3 pt-1 text-sm">
+                <h6 className="text-quadnary">{Title}</h6>
+                <p className="text-quadnary font-semibold">{Year}</p>
+            </div>
         </div>
     );
 };

src/components/Header.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import { Link } from 'react-router-dom';
 
 const Header = () => {
  return (
-    <header className="fixed w-full h-[5vh] py-3 px-6 bg-secondary">
+    <header className="fixed z-20 w-full h-[5vh] py-3 px-6 bg-secondary">
-        <a href="/">DigiFlix</a>
+        <Link href="/" className='text-quadnary text-2xl font-semibold'>DigiFlix</Link>
     </header>
 )
 };

src/components/Star.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+const Star = ({
+    size = 5,
+    fill = "#00000000",
+    stroke = "#DAA520",
+    favouriteList,
+    setFavouriteList,
+    movie,
+}) => {
+    // Calculate points for a five-pointed star
+    const points = [];
+    const outerRadius = size / 2;
+    const innerRadius = outerRadius * 0.382; // Golden ratio
+
+    for (let i = 0; i < 10; i++) {
+        const radius = i % 2 === 0 ? outerRadius : innerRadius;
+        const angle = (Math.PI / 5) * i - Math.PI / 2;
+        const x = radius * Math.cos(angle) + size / 2;
+        const y = radius * Math.sin(angle) + size / 2;
+        points.push(`${x},${y}`);
+    }
+
+    const handleFavouriteList = () => {
+        favouriteList?.includes(movie)
+            ? setFavouriteList((prevList) =>
+                  prevList?.filter((movieItem) => movieItem !== movie)
+              )
+            : setFavouriteList((prevList) => [...prevList, movie]);
+        
+    };
+
+    return (
+        <svg
+            height="1em"
+            width="1em"
+            viewBox={`0 0 ${size} ${size}`}
+            className="absolute top-1 right-1"
+            onClick={handleFavouriteList}
+        >
+            <polygon
+                height="1em"
+                width="1em"
+                points={points.join(" ")}
+                fill={fill}
+                stroke={stroke}
+                strokeWidth={size / 15}
+                className="drop-shadow-2xl shadow-[#000] shadow-2xl"
+            />
+        </svg>
+    );
+};
+
+export default Star;

src/hooks/useFetch.js

@@ -3,22 +3,23 @@ import { useState, useEffect } from "react";
 
 const useFetch = (url) => {
     const [data, setData] = useState({});
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState({})
     useEffect(() => {
-        // console.log("Inside fetch")
         const fetch = async () => {
             let response;
             try {
+                setLoading(true);
                 response = await axios.get(url);
-                // console.log("USEFETCH:", response?.data);
                 setData(response?.data);
-            } catch {
+                setLoading(false);
-                console.log("Error in useFetch: ");
+            } catch(error) {
-                return "Error Fetching Data";
+                setError(error)
             }
         };
         fetch();
     }, [url]);
-    return data;
+    return { data, loading, error};
 };
 
 export default useFetch;

src/pages/HomePage.jsx

@@ -1,25 +1,40 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import useFetch from "../hooks/useFetch";
 
+import { Pagination } from "@mui/material";
+
 import Card from "../components/Card";
 
 const HomePage = () => {
+    const url = import.meta.env.VITE_BASE_URL;
+
     const [inputValue, setInputValue] = useState("");
     const [searchValue, setSearchValue] = useState("");
-    const [data, setData] = useState("");
+    const [page, setPage] = useState(1);
+    const [favouriteList, setFavouriteList] = useState(
+        JSON.parse(window.localStorage.getItem("favouriteMovies")) ?? []
+    );
+    const [showFavourite, setShowFavourite] = useState(false);
 
-    const url = import.meta.env.VITE_BASE_URL;
+    useEffect(() => {
-    const response = useFetch(url + "s=" + searchValue);
+        window.localStorage.setItem("favouriteMovies", JSON.stringify(favouriteList))
-    console.log(response)
+        console.log(favouriteList);
-    useEffect(() => setData(response), [data]);
+    }, [favouriteList]);
+
+    const { data, loading, error } = useFetch(
+        url + "&s=" + searchValue + "&page=" + page
+    );
+    const handlePageChange = (e) => {
+        setPage(e?.target?.textContent);
+    };
     const handleSearch = (event) => {
         event.preventDefault();
         setSearchValue(inputValue);
     };
     return (
-        <div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex justify-center">
+        <div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex flex-col items-center ">
-            <div>
+            <div className="flex items-center gap-10">
-                <form className="">
+                <form className="flex gap-3 items-center">
                     <input
                         type="text"
                         name="search"
@@ -28,24 +43,111 @@ const HomePage = () => {
                         onChange={(event) =>
                             setInputValue(event?.target?.value)
                         }
-                        className="p-1 text-quadnary bg-primary rounded outline-none border border-ternary"
+                        className="p-1 text-quadnary bg-secondary focus:bg-secondary rounded outline-none border border-ternary"
                     />
                     <button
                         type="button"
-                        className="text-quadnary"
+                        className="px-4 py-1 font-semibold h-full rounded border border-quadnary text-quadnary bg-secondary"
                         onClick={handleSearch}
                     >
                         Search
                     </button>
                 </form>
-            </div>
+                <div className="">
-            {data?.Search?.length > 0 && 
+                    <label htmlFor="favourite">Favourites</label>
-                <div>
+                    <input
-                    {data?.Search?.map((movie) => <Card key={movie?.imdbID} movie={movie}/>)}
+                        type="checkbox"
+                        name="favourite"
+                        id="favourite"
+                        onClick={() => setShowFavourite((prev) => !prev)}
+                    />
                 </div>
-            }
+            </div>
+            {(showFavourite && (
+                <div className="grid grid-cols-5 gap-4 mb-6 justify-center">
+                    {favouriteList?.map((movie) => (
+                        <Card
+                            key={movie?.imdbID}
+                            movie={movie}
+                            setFavouriteList={setFavouriteList}
+                            favouriteList={favouriteList}
+                        />
+                    ))}
+                </div>
+            )) ||
+                (data?.Search?.length > 0 && (
+                    <div className="flex flex-col items-center m-10">
+                        {loading && (
+                            <svg
+                                className="animate-spin h-12 w-12 border-4 border-[#fff] mb-6"
+                                viewBox="0 0 24 24"
+                                fill="#fff"
+                            ></svg>
+                        )}
+                        <div className="grid grid-cols-5 gap-4 mb-6 justify-center">
+                            {data?.Search?.map((movie) => (
+                                <Card
+                                    key={movie?.imdbID}
+                                    movie={movie}
+                                    setFavouriteList={setFavouriteList}
+                                    favouriteList={favouriteList}
+                                />
+                            ))}
+                        </div>
+                        <Pagination
+                            sx={{ bgcolor: "#6B8A7A" }}
+                            onChange={handlePageChange}
+                            page={Number(page)}
+                            count={Math.ceil(data?.totalResults / 10)}
+                            variant="outlined"
+                            shape="rounded"
+                        />
+                    </div>
+                ))}
         </div>
     );
 };
 
 export default HomePage;
+
+function SearchBar({
+    inputValue,
+    event,
+    setInputValue,
+    target,
+    value,
+    handleSearch,
+    setShowFavourite,
+    prev,
+}) {
+    return (
+        <div className="flex items-center gap-10">
+            <form className="flex gap-3 items-center">
+                <input
+                    type="text"
+                    name="search"
+                    id="search"
+                    value={inputValue}
+                    onChange={(event) => setInputValue(event?.target?.value)}
+                    className="p-1 text-quadnary bg-secondary focus:bg-secondary rounded outline-none border border-ternary"
+                />
+                <button
+                    type="button"
+                    className="px-4 py-1 font-semibold h-full rounded border border-quadnary text-quadnary bg-secondary"
+                    onClick={handleSearch}
+                >
+                    Search
+                </button>
+            </form>
+            <div className="">
+                <label htmlFor="favourite">Favourites</label>
+                <input
+                    type="checkbox"
+                    name="favourite"
+                    id="favourite"
+                    onClick={() => setShowFavourite((prev) => !prev)}
+                />
+            </div>
+        </div>
+    );
+}

tailwind.config.js

@@ -2,10 +2,10 @@ export default {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
     theme: {
         colors: {
-            primary: "#191A19",
+            primary: "#6B8A7A",
-            secondary: "#1E5128",
+            secondary: "#254336",
-            ternary: "#4E9F3D",
+            ternary: "#B7B597",
-            quadnary: "#D8E9A8",
+            quadnary: "#DAD3BE",
         },
         extend: {},
     },