feat: implement handle favorite units

src/components/UnitCard.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+import { useFavorites } from "../stores/useFavorites";
 import { IUnit } from "../types/IUnit";
 import HeartIcon from "./icons/HeartIcon";
 import Button from "./ui/Button";
@@ -9,7 +11,44 @@ function UnitCard({
   unitType,
   squareFt,
   salesPrice,
+  id,
+  noOfBathrooms,
+  unitView,
+  suitsArea,
+  noOfParkingSpace,
+  state,
+  balconyArea,
 }: IUnit) {
+  const { units, setUnits} = useFavorites();
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  function handleFavorite() {
+    setIsFavorite(!isFavorite);
+    if (isFavorite) {
+      setUnits(units.filter((unit) => unit.id !== id));
+    } else {
+      setUnits([...units, {
+        id: id,
+        project: project,
+        unitNo: unitNo,
+        floor: floor,
+        unitType: unitType,
+      squareFt: squareFt,
+      salesPrice: salesPrice,
+      noOfBathrooms: noOfBathrooms,
+      unitView: unitView,
+      suitsArea: suitsArea,
+      noOfParkingSpace: noOfParkingSpace,
+      state: state,
+      balconyArea: balconyArea,
+    }])
+  }
+}
+
+  useEffect(() => {
+    setIsFavorite(units.some((unit) => unit.id === id));  
+  }, [id, units]);
+
   return (
     <div className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl flex flex-col justify-between 2xl:gap-[1.111vw] gap-4 bg-white 2xl:aspect-[332/396] md:max-2xl:aspect-[352/396] aspect-[328/396]">
       <div className="flex items-center justify-between">
@@ -27,7 +66,7 @@ function UnitCard({
         </div>
         <Button onlyIcon variant="secondary">
           <span className="2xl:w-[1.389vw] w-5 aspect-square text-[#0D1922]/70">
-            <HeartIcon />
+            <HeartIcon onClick={handleFavorite} isFavorite={isFavorite}/>
           </span>
         </Button>
       </div>

src/components/icons/HeartIcon.tsx

@@ -1,6 +1,6 @@
-function HeartIcon() {
+function HeartIcon({ onClick, isFavorite }: { onClick: () => void, isFavorite: boolean }) {
   return (
-    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 20 20" fill={isFavorite ? 'black' : 'none'} xmlns="http://www.w3.org/2000/svg" onClick={() => { onClick() }}>
       <path
         d="M15.683 5.965a3.404 3.404 0 0 0-4.75 0L10 6.881l-.934-.916a3.404 3.404 0 0 0-4.75 0 3.25 3.25 0 0 0 0 4.66L10 16.666l5.683-6.043a3.25 3.25 0 0 0 0-4.659Z"
         stroke="currentColor"

src/pages/FavouritesPage.tsx

@@ -4,8 +4,10 @@ import { projects } from '../data/projects';
 import Select from '../components/ui/Select';
 import Button from '../components/ui/Button';
 import ChartIcon from '../components/icons/ChartIcon';
-
+import { useFavorites } from '../stores/useFavorites';
+import UnitCard from '../components/UnitCard';
 function FavouritesPage() {
+  const { units } = useFavorites();
   return (
     <div className='flex flex-col gap-6'>
       <div
@@ -40,6 +42,11 @@ function FavouritesPage() {
           <p className='text-m leading-0'>Compare</p>
         </Button>
       </div>
+      <div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4 py-6">
+        {units.map((unit) => (
+          <UnitCard key={unit.id} {...unit} />
+        ))}
+      </div>
       </div>
       
     </div>