From e67513cdfe0eb3d04f9154051b4a361f273c787e Mon Sep 17 00:00:00 2001
From: c00b3r <sanuyOKmaklaren0@gmail.com>
Date: Wed, 30 Apr 2025 15:20:48 +0500
Subject: [PATCH] refactor: favorites units

---
 src/components/Footer.tsx                |  88 +++++++++---------
 src/components/Header.tsx                |   2 +-
 src/components/UnitCard.tsx              | 109 +++++++++--------------
 src/components/icons/FilledHeartIcon.tsx |  15 ++++
 src/components/icons/HeartIcon.tsx       |  10 +--
 src/main.tsx                             |   6 +-
 src/pages/FavouritesPage.tsx             |  50 +++++------
 src/pages/SearchPage.tsx                 | 108 +++++++++++-----------
 src/stores/useFavorites.ts               |  18 ----
 src/stores/useFavoritesUnitsStore.ts     |  18 ++++
 10 files changed, 208 insertions(+), 216 deletions(-)
 create mode 100644 src/components/icons/FilledHeartIcon.tsx
 delete mode 100644 src/stores/useFavorites.ts
 create mode 100644 src/stores/useFavoritesUnitsStore.ts

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e4b59ef..4e9a6bd 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,111 +1,111 @@
-import { Link } from "react-router";
-import YoutubeIcon from "./icons/YoutubeIcon";
-import InstagramIcon from "./icons/InstagramIcon";
-import FacebookIcon from "./icons/FacebookIcon";
-import LinkedInIcon from "./icons/LinkedInIcon";
-import TwitterIcon from "./icons/TwitterIcon";
+import { Link } from 'react-router';
+import YoutubeIcon from './icons/YoutubeIcon';
+import InstagramIcon from './icons/InstagramIcon';
+import FacebookIcon from './icons/FacebookIcon';
+import LinkedInIcon from './icons/LinkedInIcon';
+import TwitterIcon from './icons/TwitterIcon';
 
 function Footer() {
   return (
-    <footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white">
+    <footer className='2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white'>
       <img
-        src="/images/logo.svg"
-        className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
+        src='/images/logo.svg'
+        className='2xl:w-[5.972vw] w-[86px] cursor-pointer'
         onClick={() => {
-          window.location.href = "/";
+          window.location.href = '/';
         }}
-        alt="IRTH"
+        alt='IRTH'
       />
 
-      <p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 max-md:mt-12">
+      <p className='2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 max-md:mt-12'>
         For more information, visit
         <br />
         our website: 
         <Link
-          className="text-[#00BED7] md:underline"
-          to={"https://www.irth.ae"}
+          className='text-[#00BED7] md:underline'
+          to={'https://www.irth.ae'}
         >
           www.irth.ae
         </Link>
       </p>
 
-      <div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6">
-        <p className="text-s text-[#0D1922]/40">Follow us for more:</p>
-        <div className="flex 2xl:gap-[0.278vw] gap-1">
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+      <div className='2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6'>
+        <p className='text-s text-[#0D1922]/40'>Follow us for more:</p>
+        <div className='flex 2xl:gap-[0.278vw] gap-1'>
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
               <YoutubeIcon />
             </div>
           </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
               <InstagramIcon />
             </div>
           </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
               <FacebookIcon />
             </div>
           </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
               <LinkedInIcon />
             </div>
           </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
               <TwitterIcon />
             </div>
           </div>
         </div>
       </div>
 
-      <div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1 max-md:mt-4">
+      <div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1 max-md:mt-4'>
         <Link
-          to={"/"}
-          className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
+          to={'/'}
+          className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
         >
           Map
         </Link>
         <Link
-          to={"/unit-types"}
-          className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
+          to={'/unit-types'}
+          className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
         >
           Unit Types
         </Link>
         <Link
-          to={"/about-irth"}
-          className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
+          to={'/about-irth'}
+          className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
         >
           About IRTH
         </Link>
       </div>
 
-      <div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2 max-2xl:col-span-2 max-md:mt-4">
+      <div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2 max-2xl:col-span-2 max-md:mt-4'>
         <Link
-          to={"/favourites"}
-          className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
+          to={'/favorites'}
+          className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
         >
           Favorites
         </Link>
         <Link
-          to={"/search"}
-          className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
+          to={'/search'}
+          className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
         >
           Search
         </Link>
         <Link
-          to={"/"}
-          className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
+          to={'/'}
+          className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
         >
           Brochures
         </Link>
       </div>
 
-      <div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
+      <div className='content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]'>
         <Link
-          to={"/"}
-          className="2xl:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70"
+          to={'/'}
+          className='2xl:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70'
         >
           Privacy Policy
         </Link>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b366e15..12a6bfc 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -48,7 +48,7 @@ function NavBar() {
         <NavItem href={"/"} title={"Map"} />
         <NavItem href={"/unit-types"} title={"Unit Types"} />
         <NavItem href={"/about"} title={"About IRTH"} />
-        <NavItem href={"/favourites"} title={"Favourites"} />
+        <NavItem href={"/favorites"} title={"Favorites"} />
         <BrochuresDropdown />
         <NavItem href={"/search"} title={"Search"} />
       </nav>
diff --git a/src/components/UnitCard.tsx b/src/components/UnitCard.tsx
index b5f3240..e137007 100644
--- a/src/components/UnitCard.tsx
+++ b/src/components/UnitCard.tsx
@@ -1,83 +1,60 @@
-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";
+import { useFavoritesUnitsStore } from '../stores/useFavoritesUnitsStore';
+import { IUnit } from '../types/IUnit';
+import FilledHeartIcon from './icons/FilledHeartIcon';
+import HeartIcon from './icons/HeartIcon';
+import Button from './ui/Button';
 
-function UnitCard({
-  project,
-  unitNo,
-  floor,
-  unitType,
-  squareFt,
-  salesPrice,
-  id,
-  noOfBathrooms,
-  unitView,
-  suitsArea,
-  noOfParkingSpace,
-  state,
-  balconyArea,
-}: IUnit) {
-  const { units, setUnits} = useFavorites();
-  const [isFavorite, setIsFavorite] = useState(false);
+function UnitCard({ unit }: { unit: IUnit }) {
+  const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
 
   function handleFavorite() {
-    setIsFavorite(!isFavorite);
-    if (isFavorite) {
-      setUnits(units.filter((unit) => unit.id !== id));
+    if (favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
+      setFavoriteUnits(
+        favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.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,
-    }])
+      setFavoriteUnits([...favoriteUnits, unit]);
+    }
   }
-}
-
-  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">
-        <div className="2xl:space-y-[0.278vw] space-y-1">
-          <p className="text-s text-[#00BED7]">{project}</p>
-          <div className="flex items-center 2xl:gap-[0.556vw] gap-2">
-            <p className="text-caption-m">
-              {(unitNo.split("-")[0] === "W" ? "West" : "East") + " Wing"}
+    <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'>
+        <div className='2xl:space-y-[0.278vw] space-y-1'>
+          <p className='text-s text-[#00BED7]'>{unit.project}</p>
+          <div className='flex items-center 2xl:gap-[0.556vw] gap-2'>
+            <p className='text-caption-m'>
+              {(unit.unitNo.split('-')[0] === 'W' ? 'West' : 'East') + ' Wing'}
             </p>
-            <div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
-            <p className="text-caption-m">Floor {floor}</p>
-            <div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
-            <p className="text-caption-m">{unitNo}</p>
+            <div className='2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full' />
+            <p className='text-caption-m'>Floor {unit.floor}</p>
+            <div className='2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full' />
+            <p className='text-caption-m'>{unit.unitNo}</p>
           </div>
         </div>
-        <Button onlyIcon variant="secondary">
-          <span className="2xl:w-[1.389vw] w-5 aspect-square text-[#0D1922]/70">
-            <HeartIcon onClick={handleFavorite} isFavorite={isFavorite}/>
+        <Button onlyIcon variant='secondary' onClick={handleFavorite}>
+          <span className='2xl:w-[1.389vw] w-5 aspect-square text-[#0D1922]/70'>
+            {favoriteUnits.some(
+              (favoriteUnit) => favoriteUnit.id === unit.id
+            ) ? (
+              <FilledHeartIcon />
+            ) : (
+              <HeartIcon />
+            )}
           </span>
         </Button>
       </div>
-      <div className="2xl:space-y-[0.278vw] space-y-1">
-        <p className="text-s">
-          {unitType},{" "}
-          {squareFt.toLocaleString(undefined, { maximumFractionDigits: 2 })}{" "}
-          Sqft
+      <div className='2xl:space-y-[0.278vw] space-y-1'>
+        <p className='text-s'>
+          {`${unit.unitType}, ${unit.squareFt.toLocaleString(undefined, {
+            maximumFractionDigits: 2,
+          })} Sqft`}
         </p>
-        <p className="text-[#00BED7] text-subheadline-s font-medium">
-          AED {Intl.NumberFormat("en").format(salesPrice)}
+        <p className='text-[#00BED7] text-subheadline-s font-medium'>
+          {`AED ${Intl.NumberFormat('ar-AE', {
+            currency: 'AED',
+            minimumFractionDigits: 0,
+          }).format(unit.salesPrice)}`}
         </p>
       </div>
     </div>
diff --git a/src/components/icons/FilledHeartIcon.tsx b/src/components/icons/FilledHeartIcon.tsx
new file mode 100644
index 0000000..5382d26
--- /dev/null
+++ b/src/components/icons/FilledHeartIcon.tsx
@@ -0,0 +1,15 @@
+function FilledHeartIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill='currentColor' xmlns="http://www.w3.org/2000/svg" >
+      <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"
+        strokeOpacity={0.7}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default FilledHeartIcon;
\ No newline at end of file
diff --git a/src/components/icons/HeartIcon.tsx b/src/components/icons/HeartIcon.tsx
index 171ddb0..015a500 100644
--- a/src/components/icons/HeartIcon.tsx
+++ b/src/components/icons/HeartIcon.tsx
@@ -1,12 +1,12 @@
-function HeartIcon({ onClick, isFavorite }: { onClick: () => void, isFavorite: boolean }) {
+function HeartIcon() {
   return (
-    <svg viewBox="0 0 20 20" fill={isFavorite ? 'black' : 'none'} xmlns="http://www.w3.org/2000/svg" onClick={() => { onClick() }}>
+    <svg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <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"
+        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'
         strokeOpacity={0.7}
         strokeWidth={1.5}
-        strokeLinecap="round"
+        strokeLinecap='round'
       />
     </svg>
   );
diff --git a/src/main.tsx b/src/main.tsx
index 71273d5..070d59e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -9,7 +9,7 @@ import ComplexPage from "./pages/ComplexPage.tsx";
 import FloorsPage from "./pages/FloorsPage.tsx";
 import UnitTypesPage from "./pages/UnitTypesPage.tsx";
 import AboutPage from "./pages/AboutPages.tsx";
-import FavouritesPage from "./pages/FavouritesPage.tsx";
+import FavoritesPage from "./pages/FavouritesPage.tsx";
 import SearchPage from "./pages/SearchPage.tsx";
 import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
 import { queryClient } from "./lib/queryClient.ts";
@@ -27,8 +27,8 @@ const route = createBrowserRouter([
         element: <AboutPage />,
       },
       {
-        path: "/favourites",
-        element: <FavouritesPage />,
+        path: "/favorites",
+        element: <FavoritesPage />,
       },
       {
         path: "/search",
diff --git a/src/pages/FavouritesPage.tsx b/src/pages/FavouritesPage.tsx
index 5765e29..85f0555 100644
--- a/src/pages/FavouritesPage.tsx
+++ b/src/pages/FavouritesPage.tsx
@@ -4,10 +4,11 @@ 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 { useFavoritesUnitsStore } from '../stores/useFavoritesUnitsStore';
 import UnitCard from '../components/UnitCard';
-function FavouritesPage() {
-  const { units } = useFavorites();
+
+function FavoritesPage() {
+  const { favoriteUnits } = useFavoritesUnitsStore();
   return (
     <div className='flex flex-col gap-6'>
       <div
@@ -17,7 +18,7 @@ function FavouritesPage() {
         )}
       >
         <div className='2xl:space-y-[1.111vw] space-y-4'>
-          <p className='2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]'>
+          <p className='2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-medium leading-[135%]'>
             Favorites
           </p>
           <ProjectSelect
@@ -28,29 +29,28 @@ function FavouritesPage() {
         </div>
       </div>
       <div className='px-8'>
-      <div className='flex gap-4'>
-        <Select
-          options={['All', 'Favorites']}
-          onSelect={() => {}}
-          defaultOption='All'
-          className='w-[22.778vw]'
-        />
-        <Button variant='secondary' size='large' className='text-black'>
-          <div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6'>
-            <ChartIcon />
-          </div>
-          <p className='text-m leading-0'>Compare</p>
-        </Button>
+        <div className='flex gap-4'>
+          <Select
+            options={['All', 'Favorites']}
+            onSelect={() => {}}
+            defaultOption='All'
+            className='w-[22.778vw]'
+          />
+          <Button variant='secondary' size='large' className='text-black'>
+            <div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6'>
+              <ChartIcon />
+            </div>
+            <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'>
+          {favoriteUnits.map((unit) => (
+            <UnitCard key={unit.id} unit={unit} />
+          ))}
+        </div>
       </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>
   );
 }
 
-export default FavouritesPage;
+export default FavoritesPage;
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index d879ef1..5cbcf40 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -1,23 +1,23 @@
-import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
-import { api } from "../api/ky";
-import { IUnit } from "../types/IUnit";
-import UnitCard from "../components/UnitCard";
-import { useEffect, useRef, useState } from "react";
-import SearchFilters, { Filters } from "../components/SearchFilters";
-import { useSearchParams } from "react-router";
-import Button from "../components/ui/Button";
-import FiltersIcon from "../components/icons/FiltersIcon";
-import RestartIcon from "../components/icons/RestartIcon";
-import clsx from "clsx";
-import { AnimatePresence, motion } from "motion/react";
-import { useDebounce } from "../hooks/useDebounce";
-import Select from "../components/ui/Select";
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import { api } from '../api/ky';
+import { IUnit } from '../types/IUnit';
+import UnitCard from '../components/UnitCard';
+import { useEffect, useRef, useState } from 'react';
+import SearchFilters, { Filters } from '../components/SearchFilters';
+import { useSearchParams } from 'react-router';
+import Button from '../components/ui/Button';
+import FiltersIcon from '../components/icons/FiltersIcon';
+import RestartIcon from '../components/icons/RestartIcon';
+import clsx from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
+import { useDebounce } from '../hooks/useDebounce';
+import Select from '../components/ui/Select';
 
 const SORT_OPTIONS = {
-  "Sort by ascending price": "cost asc",
-  "Sort by descending price": "cost desc",
-  "Sort by ascending area": "sqft asc",
-  "Sort by descending area": "sqft desc",
+  'Sort by ascending price': 'cost asc',
+  'Sort by descending price': 'cost desc',
+  'Sort by ascending area': 'sqft asc',
+  'Sort by descending area': 'sqft desc',
 };
 
 const STEP = 12;
@@ -25,9 +25,9 @@ const STEP = 12;
 function SearchPage() {
   const [searchParams] = useSearchParams();
 
-  const project = searchParams.get("project");
-  const unitTypes = searchParams.getAll("unitTypes");
-  const view = searchParams.get("view");
+  const project = searchParams.get('project');
+  const unitTypes = searchParams.getAll('unitTypes');
+  const view = searchParams.get('view');
 
   const [filtersInModal, setFiltersInModal] = useState(false);
 
@@ -40,14 +40,14 @@ function SearchPage() {
   const debouncedArea = useDebounce(area, 500);
 
   const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
-    "Sort by ascending price"
+    'Sort by ascending price'
   );
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       initialPageParam: 0,
       queryKey: [
-        "units",
+        'units',
         project,
         unitTypes,
         view,
@@ -68,22 +68,22 @@ function SearchPage() {
         await api
           .get(
             `units?offset=${pageParam}&limit=${STEP}${
-              project ? `&project=${project}` : ""
-            }${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join("")}${
-              view ? `&view=${view}` : ""
+              project ? `&project=${project}` : ''
+            }${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join('')}${
+              view ? `&view=${view}` : ''
             }${
               debouncedCost.length > 0
-                ? `&cost=${debouncedCost.map(Math.round).join(",")}`
-                : ""
+                ? `&cost=${debouncedCost.map(Math.round).join(',')}`
+                : ''
             }${
               debouncedFloor.length > 0
-                ? `&floor=${debouncedFloor.map(Math.round).join(",")}`
-                : ""
+                ? `&floor=${debouncedFloor.map(Math.round).join(',')}`
+                : ''
             }${
               debouncedArea.length > 0
-                ? `&area=${debouncedArea.map(Math.round).join(",")}`
-                : ""
-            }${sort ? `&order=${SORT_OPTIONS[sort].split(" ").join(",")}` : ""}`
+                ? `&area=${debouncedArea.map(Math.round).join(',')}`
+                : ''
+            }${sort ? `&order=${SORT_OPTIONS[sort].split(' ').join(',')}` : ''}`
           )
           .json<IUnit[]>(),
       getNextPageParam: (lastPage, _, lastPageIndex) =>
@@ -100,7 +100,7 @@ function SearchPage() {
       (entries) => {
         if (entries[0].isIntersecting) fetchNextPage();
       },
-      { rootMargin: "-200px" }
+      { rootMargin: '-200px' }
     );
     if (observerElement) observer.observe(observerElement);
 
@@ -126,7 +126,7 @@ function SearchPage() {
   const [footerReached, setFooterReached] = useState(false);
 
   useEffect(() => {
-    const footer = document.querySelector("footer");
+    const footer = document.querySelector('footer');
     const observer = new IntersectionObserver((entries) =>
       setFooterReached(entries[0].isIntersecting)
     );
@@ -142,7 +142,7 @@ function SearchPage() {
   const queryClient = useQueryClient();
 
   useEffect(() => {
-    const filters = queryClient.getQueryData<Filters>(["filters", project]);
+    const filters = queryClient.getQueryData<Filters>(['filters', project]);
     if (filters) {
       setActiveFiltersCount(
         +!!view +
@@ -176,15 +176,15 @@ function SearchPage() {
         setInModal={setFiltersInModal}
         {...{ area, cost, floor, setArea, setCost, setFloor }}
       />
-      <div className="2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4">
+      <div className='2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4'>
         <Select
           options={Object.keys(SORT_OPTIONS)}
           defaultOption={sort}
           onSelect={(opt) => setSort(opt as keyof typeof SORT_OPTIONS)}
-          className="2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]"
+          className='2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]'
         />
-        <hr className="2xl:h-[0.069vw] border-[#E2E2DC]" />
-        <AnimatePresence mode="wait">
+        <hr className='2xl:h-[0.069vw] border-[#E2E2DC]' />
+        <AnimatePresence mode='wait'>
           {project &&
             unitTypes &&
             debouncedCost &&
@@ -204,10 +204,10 @@ function SearchPage() {
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
-                className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4"
+                className='2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4'
               >
                 {data?.pages.map((page) =>
-                  page.map((unit) => <UnitCard key={unit.id} {...unit} />)
+                  page.map((unit) => <UnitCard key={unit.id} unit={unit} />)
                 )}
               </motion.div>
             )}
@@ -216,34 +216,34 @@ function SearchPage() {
       {showButtons && (
         <div
           className={clsx(
-            "fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all",
+            'fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all',
             footerReached && !hasNextPage
-              ? "top-[calc(100dvh-17.222vw)] translate-y-0"
-              : "top-[calc(100dvh-2.222vw)] -translate-y-full"
+              ? 'top-[calc(100dvh-17.222vw)] translate-y-0'
+              : 'top-[calc(100dvh-2.222vw)] -translate-y-full'
           )}
         >
-          <Button onClick={() => setFiltersInModal(true)} className="relative">
-            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
+          <Button onClick={() => setFiltersInModal(true)} className='relative'>
+            <span className='2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white'>
               <FiltersIcon />
             </span>
-            <span className="text-caption-m">Filters</span>
+            <span className='text-caption-m'>Filters</span>
             {!!activeFiltersCount && (
-              <div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]">
+              <div className='absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]'>
                 {activeFiltersCount}
               </div>
             )}
           </Button>
           <Button
-            variant="secondary"
-            className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
+            variant='secondary'
+            className='2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]'
             onClick={() => {
-              window.location.href = "/search";
+              window.location.href = '/search';
             }}
           >
-            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70">
+            <span className='2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70'>
               <RestartIcon />
             </span>
-            <span className="text-caption-m">Reset</span>
+            <span className='text-caption-m'>Reset</span>
           </Button>
         </div>
       )}
diff --git a/src/stores/useFavorites.ts b/src/stores/useFavorites.ts
deleted file mode 100644
index d7ca4c6..0000000
--- a/src/stores/useFavorites.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { create } from 'zustand';
-import { IUnit } from '../types/IUnit';
-import { persist } from 'zustand/middleware';
-
-export interface FavoriteStore {
-  units: IUnit[];
-  setUnits: (units: IUnit[]) => void;
-}
-
-export const useFavorites = create<FavoriteStore>()(
-  persist(
-    (set) => ({
-      units: [],
-      setUnits: (units: IUnit[]) => set({ units }),
-    }),
-    { name: 'favorites' }
-  )
-);
diff --git a/src/stores/useFavoritesUnitsStore.ts b/src/stores/useFavoritesUnitsStore.ts
new file mode 100644
index 0000000..9a8476e
--- /dev/null
+++ b/src/stores/useFavoritesUnitsStore.ts
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+import { IUnit } from '../types/IUnit';
+import { persist } from 'zustand/middleware';
+
+export interface FavoriteStore {
+  favoriteUnits: IUnit[];
+  setFavoriteUnits: (units: IUnit[]) => void;
+}
+
+export const useFavoritesUnitsStore = create<FavoriteStore>()(
+  persist(
+    (set) => ({
+      favoriteUnits: [],
+      setFavoriteUnits: (units: IUnit[]) => set({ favoriteUnits: units }),
+    }),
+    { name: 'favorites' }
+  )
+);