upd

src/pages/FavouritesPage.tsx

@@ -1,52 +1,64 @@
-import clsx from 'clsx';
-import ProjectSelect from '../components/ProjectSelect';
-import { projects } from '../data/projects';
-import Select from '../components/ui/Select';
-import Button from '../components/ui/Button';
-import ChartIcon from '../components/icons/ChartIcon';
-import { useFavoritesUnitsStore } from '../stores/useFavoritesUnitsStore';
-import UnitCard from '../components/UnitCard';
+import clsx from "clsx";
+import ProjectSelect from "../components/ProjectSelect";
+import { projects } from "../data/projects";
+import Select from "../components/ui/Select";
+import Button from "../components/ui/Button";
+import ChartIcon from "../components/icons/ChartIcon";
+import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
+import UnitCard from "../components/UnitCard";
+import { useState } from "react";
+import { SORT_OPTIONS } from "../data/sortOptions";
 
 function FavoritesPage() {
   const { favoriteUnits } = useFavoritesUnitsStore();
+
+  const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
+    "Sort by ascending price"
+  );
+
+  const [selectedProject, setSelectedProject] = useState<string>();
+
   return (
-    <div className='flex flex-col gap-6'>
+    <div className="flex flex-col gap-6">
       <div
         className={clsx(
-          '2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4',
-          '2xl:px-[2.222vw] md:max-2xl:px-6 px-4'
+          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4",
+          "2xl:px-[2.222vw] md:max-2xl:px-6 px-4"
         )}
       >
-        <div className='2xl:space-y-[1.111vw] space-y-4'>
-          <p className='2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-medium leading-[135%]'>
-            Favorites
-          </p>
+        <div className="2xl:space-y-[1.111vw] space-y-4">
+          <p className="text-h2 font-medium">Favorites</p>
           <ProjectSelect
             projects={projects}
-            onSelect={() => {}}
-            defaultProject={projects[0]}
+            onSelect={(project) => setSelectedProject(project?.title)}
+            defaultProject={null}
+            withAll
           />
         </div>
       </div>
-      <div className='px-8'>
-        <div className='flex gap-4'>
+      <div className="2xl:px-[2.222vw] md:max-2xl:px-6 px-4">
+        <div className="flex 2xl:gap-[1.111vw] gap-4">
           <Select
-            options={['All', 'Favorites']}
-            onSelect={() => {}}
-            defaultOption='All'
-            className='w-[22.778vw]'
+            options={Object.keys(SORT_OPTIONS)}
+            defaultOption={sort}
+            onSelect={(opt) => setSort(opt as keyof typeof SORT_OPTIONS)}
+            className="2xl:w-[22.778vw] md:max-2xl:max-w-[45.833vw]"
           />
-          <Button variant='secondary' size='large' className='text-black'>
-            <div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6'>
+          <Button variant="secondary" size="large">
+            <div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6">
               <ChartIcon />
             </div>
-            <p className='text-m leading-0'>Compare</p>
+            <p className="text-btn-l">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 className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4 py-6">
+          {favoriteUnits
+            .filter(
+              (unit) => !selectedProject || unit.project === selectedProject
+            )
+            .map((unit) => (
+              <UnitCard key={unit.id} unit={unit} />
+            ))}
         </div>
       </div>
     </div>

src/pages/SearchPage.tsx

@@ -13,13 +13,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { useDebounce } from "../hooks/useDebounce";
 import Select from "../components/ui/Select";
 import Skeleton from "react-loading-skeleton";
-
-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",
-};
+import { SORT_OPTIONS } from "../data/sortOptions";
 
 const STEP = 12;
 

src/pages/UnitTypesPage.tsx

@@ -4,9 +4,11 @@ import { projects } from "../data/projects";
 import clsx from "clsx";
 import UnitTypeCard from "../components/UnitTypeCard";
 import { AnimatePresence, motion } from "motion/react";
-
+import Project from "../types/Project";
 function UnitTypesPage() {
-  const [selectedProject, setSelectedProject] = useState(projects[0]);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(
+    projects[0]
+  );
 
   return (
     <div className="">
@@ -29,13 +31,13 @@ function UnitTypesPage() {
       <AnimatePresence mode="wait">
         <motion.div
           layout
-          key={selectedProject.title}
+          key={selectedProject?.title}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           className="m-4 md:max-2xl:m-6 2xl:m-[2.222vw] grid grid-cols-1 md:max-2xl:grid-cols-2 2xl:grid-cols-4 gap-4 2xl:gap-[1.111vw]"
         >
-          {selectedProject.types?.map((type, index) => (
+          {selectedProject?.types?.map((type, index) => (
             <UnitTypeCard
               key={index}
               project={selectedProject.title}