Refactor ProjectSelect and UnitTypeCard components; enhance styling and add new unit types to projects data

src/components/ProjectSelect.tsx

@@ -1,18 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import clsx from "clsx";
 import { useEffect, useState } from "react";
-
-interface Project {
-  title: string;
-  img: string;
-  types: {
-    name: string;
-    img: string;
-    wings: string;
-    floors: string;
-    area: string;
-  }[];
-}
+import Project from "../types/Project";
+import Select from "./ui/Select";
 
 function ProjectSelect({
   projects,
@@ -28,26 +18,38 @@ function ProjectSelect({
   }, [selectedProject]);
 
   return (
-    <div className="flex 2xl:gap-[0.556vw] gap-2">
-      {projects.map((project) => (
-        <div
-          className={clsx(
-            "2xl:rounded-[2.778vw] rounded-[40px] 2xl:p-[0.278vw] p-1 flex items-center 2xl:gap-[0.556vw] gap-2 text-s 2xl:outline-[0.069vw] outline transition-colors duration-300 cursor-pointer",
-            project.title === selectedProject.title
-              ? "outline-[#00BED7]"
-              : "outline-[#E2E2DC]"
-          )}
-          onClick={() => setSelectedProject(project)}
-        >
-          <img
-            src={project.img}
-            alt={project.title}
-            className="object-cover 2xl:w-[2.778vw] w-10 aspect-square rounded-full"
-          />
-          <p className="2xl:mr-[1.111vw] mr-6">{project.title}</p>
-        </div>
-      ))}
-    </div>
+    <>
+      <div className="flex 2xl:gap-[0.556vw] gap-2 max-md:hidden">
+        {projects.map((project) => (
+          <div
+            className={clsx(
+              "2xl:rounded-[2.778vw] rounded-[40px] 2xl:p-[0.278vw] p-1 flex items-center 2xl:gap-[0.556vw] gap-2 text-s 2xl:outline-[0.069vw] outline transition-colors duration-300 cursor-pointer",
+              project.title === selectedProject.title
+                ? "outline-[#00BED7]"
+                : "outline-[#E2E2DC]"
+            )}
+            onClick={() => setSelectedProject(project)}
+          >
+            <img
+              src={project.img}
+              alt={project.title}
+              className="object-cover 2xl:w-[2.778vw] w-10 aspect-square rounded-full"
+            />
+            <p className="2xl:mr-[1.111vw] mr-6">{project.title}</p>
+          </div>
+        ))}
+      </div>
+
+      <Select
+        options={projects.map((project) => project.title)}
+        onSelect={(option) =>
+          setSelectedProject(
+            projects.find((project) => project.title === option) || projects[0]
+          )
+        }
+        className="md:hidden"
+      />
+    </>
   );
 }