upd

src/components/ProjectSelect.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+
+interface Project {
+  title: string;
+  img: string;
+}
+
+function ProjectSelect({
+  projects,
+  onSelect,
+}: {
+  projects: Project[];
+  onSelect: (project: Project) => void;
+}) {
+  const [selectedProject, setSelectedProject] = useState(projects[0]);
+
+  useEffect(() => {
+    onSelect(selectedProject);
+  }, [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>
+  );
+}
+
+export default ProjectSelect;

src/components/UnitTypeCard.tsx

@@ -0,0 +1,21 @@
+interface UnitType {
+  name: string;
+  img: string;
+  wings: string;
+  floors: string;
+  area: string;
+}
+
+function UnitTypeCard({ project, type }: { project: string; type: UnitType }) {
+  return (
+    <div className="bg-white p-4 rounded-2xl">
+      <p className="text-2xl font-semibold leading-[135%]">{project}</p>
+      <p className="text-2xl font-semibold leading-[135%]">{type.name}</p>
+      <p className="text-2xl font-semibold leading-[135%]">{type.wings}</p>
+      <p className="text-2xl font-semibold leading-[135%]">{type.floors}</p>
+      <p className="text-2xl font-semibold leading-[135%]">{type.area}</p>
+    </div>
+  );
+}
+
+export default UnitTypeCard;