From 2a1add765cd8cf10cc101854ddc13d4ba09f64ab Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Wed, 21 May 2025 12:38:14 +0500
Subject: [PATCH] upd

---
 src/components/NewSelectedComplexCard.tsx     |  2 +-
 src/components/UnitCard.tsx                   |  2 +-
 src/components/UnitTypeCard.tsx               |  2 +-
 src/components/UnitTypeItem.tsx               | 18 +++---
 src/components/UnitTypesSelect.tsx            |  2 +-
 .../{unitTypes.ts => formattedUnitTypes.ts}   |  0
 src/data/projects.ts                          | 10 ++++
 src/main.tsx                                  |  2 +-
 src/pages/FavouritesPage.tsx                  |  2 +-
 src/pages/UnitTypeItemPage.tsx                | 55 +++++++++++--------
 src/types/UnitType.ts                         |  1 +
 11 files changed, 61 insertions(+), 35 deletions(-)
 rename src/data/{unitTypes.ts => formattedUnitTypes.ts} (100%)

diff --git a/src/components/NewSelectedComplexCard.tsx b/src/components/NewSelectedComplexCard.tsx
index 82eeafc..5e68285 100644
--- a/src/components/NewSelectedComplexCard.tsx
+++ b/src/components/NewSelectedComplexCard.tsx
@@ -6,7 +6,7 @@ import CloseIcon from "./icons/CloseIcon";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../api/ky";
 import IMarker from "../types/IMarker";
-import { formattedUnitTypes } from "../data/unitTypes";
+import { formattedUnitTypes } from "../data/formattedUnitTypes";
 import { useNavigate } from "react-router";
 
 function NewSelectedComplexCard({
diff --git a/src/components/UnitCard.tsx b/src/components/UnitCard.tsx
index d0a97ad..328d56e 100644
--- a/src/components/UnitCard.tsx
+++ b/src/components/UnitCard.tsx
@@ -5,7 +5,7 @@ import HeartIcon from "./icons/HeartIcon";
 import Button from "./ui/Button";
 import "react-loading-skeleton/dist/skeleton.css";
 import Skeleton from "react-loading-skeleton";
-import { formattedUnitTypes } from "../data/unitTypes";
+import { formattedUnitTypes } from "../data/formattedUnitTypes";
 
 function UnitCard({ unit }: { unit: IUnit }) {
   const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
diff --git a/src/components/UnitTypeCard.tsx b/src/components/UnitTypeCard.tsx
index e7ef389..86226be 100644
--- a/src/components/UnitTypeCard.tsx
+++ b/src/components/UnitTypeCard.tsx
@@ -4,7 +4,7 @@ import UnitType from "../types/UnitType";
 function UnitTypeCard({ project, type }: { project: string; type: UnitType }) {
   return (
     <Link
-      to={`/unit-types/smth`}
+      to={`/unit-types/${type.slug}?project=${project}`}
       className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw]"
     >
       <div className="space-y-1 2xl:space-y-[0.278vw]">
diff --git a/src/components/UnitTypeItem.tsx b/src/components/UnitTypeItem.tsx
index 8f143bc..526670c 100644
--- a/src/components/UnitTypeItem.tsx
+++ b/src/components/UnitTypeItem.tsx
@@ -6,9 +6,10 @@ interface UnitTypeItemProps {
   title: string;
   project: string;
   wing?: string;
-  floor: [number, number];
+  floor: string;
   video: { title: string; desc: string };
   texts: [string, string];
+  area: string;
 }
 
 function UnitTypeItem({
@@ -18,6 +19,7 @@ function UnitTypeItem({
   floor,
   video,
   texts,
+  area,
 }: UnitTypeItemProps) {
   return (
     <div className="2xl:p-[2.222vw] md:max-2xl:p-[3.125vw] p-4 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
@@ -28,7 +30,7 @@ function UnitTypeItem({
             <div className="flex flex-col 2xl:gap-y-[0.556vw] gap-y-2">
               <p className="font-medium md:text-h3 text-h4">{title}</p>
               <p className="2xl:rounded-[1.667vw] rounded-3xl 2xl:px-[0.833vw] 2xl:py-[0.278vw] px-3 py-1 outline outline-[#E2E2DC] text-[#0D1922]/70 text-caption-m w-fit">
-                Up to 366 Sqft
+                {area}
               </p>
             </div>
             <Button onlyIcon variant="secondary">
@@ -40,11 +42,13 @@ function UnitTypeItem({
           <div className="2xl:space-y-[0.556vw] md:max-2xl:space-y-2 space-y-1">
             <p className="text-m text-[#00BED7]">{project}</p>
             <div className="flex items-center 2xl:gap-[0.556vw]">
-              <p className="text-s text-[#0D1922]/70 peer">{wing ?? ""}</p>
-              <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC] peer-empty:hidden" />
-              <p className="text-s text-[#0D1922]/70">Floor 5-21</p>
-              <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC] peer-empty:hidden" />
-              <p>{floor.join("-")}</p>
+              {wing && (
+                <>
+                  <p className="text-s text-[#0D1922]/70">{wing}</p>
+                  <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
+                </>
+              )}
+              <p className="text-s text-[#0D1922]/70">{floor}</p>
             </div>
           </div>
           <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
diff --git a/src/components/UnitTypesSelect.tsx b/src/components/UnitTypesSelect.tsx
index 8448fca..31bffb2 100644
--- a/src/components/UnitTypesSelect.tsx
+++ b/src/components/UnitTypesSelect.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from "react";
 import clsx from "clsx";
-import { formattedUnitTypes } from "../data/unitTypes";
+import { formattedUnitTypes } from "../data/formattedUnitTypes";
 
 function UnitTypesSelect({
   unitTypes,
diff --git a/src/data/unitTypes.ts b/src/data/formattedUnitTypes.ts
similarity index 100%
rename from src/data/unitTypes.ts
rename to src/data/formattedUnitTypes.ts
diff --git a/src/data/projects.ts b/src/data/projects.ts
index 336e50c..109fb87 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -7,6 +7,7 @@ export const projects: Project[] = [
     types: [
       {
         name: "Studio Flex",
+        slug: "studio-flex",
         img: "/images/unit-types/marasi-drive/studio_flex.jpg",
         wings: "West Wing",
         floors: "Floor 5-21",
@@ -14,6 +15,7 @@ export const projects: Project[] = [
       },
       {
         name: "Studio²",
+        slug: "studio-2",
         img: "/images/unit-types/marasi-drive/studio_2.jpg",
         wings: "East Wing / West Wing",
         floors: "Floor 5-21 / 24-31",
@@ -21,6 +23,7 @@ export const projects: Project[] = [
       },
       {
         name: "1 Bedroom² Type A",
+        slug: "1-bedroom-a",
         img: "/images/unit-types/marasi-drive/1_bedroom_a.jpg",
         wings: "West Wing",
         floors: "Floor 5-31",
@@ -28,6 +31,7 @@ export const projects: Project[] = [
       },
       {
         name: "1 Bedroom² Type B",
+        slug: "1-bedroom-b",
         img: "/images/unit-types/marasi-drive/1_bedroom_b.jpg",
         wings: "East Wing / West Wing",
         floors: "Floor 5-31",
@@ -35,6 +39,7 @@ export const projects: Project[] = [
       },
       {
         name: "1 Bedroom² Type C",
+        slug: "1-bedroom-c",
         img: "/images/unit-types/marasi-drive/1_bedroom_c.jpg",
         wings: "East Wing / West Wing",
         floors: "Floor 5-31",
@@ -42,6 +47,7 @@ export const projects: Project[] = [
       },
       {
         name: "1 Bedroom² Type D",
+        slug: "1-bedroom-d",
         img: "/images/unit-types/marasi-drive/1_bedroom_d.jpg",
         wings: "East Wing / West Wing",
         floors: "Floor 5-21 / 24-31",
@@ -49,6 +55,7 @@ export const projects: Project[] = [
       },
       {
         name: "2 Bedroom² Type A",
+        slug: "2-bedroom-a",
         img: "/images/unit-types/marasi-drive/2_bedroom_a.jpg",
         wings: "East Wing / West Wing",
         floors: "Floor 5-31",
@@ -56,6 +63,7 @@ export const projects: Project[] = [
       },
       {
         name: "2 Bedroom² Type B",
+        slug: "2-bedroom-b",
         img: "/images/unit-types/marasi-drive/2_bedroom_b.jpg",
         wings: "West Wing",
         floors: "Floor 5-31",
@@ -69,12 +77,14 @@ export const projects: Project[] = [
     types: [
       {
         name: "Studio Flex",
+        slug: "studio-flex",
         img: "/images/unit-types/dubai-marina/studio_flex.jpg",
         floors: "Floor 1-10",
         area: "350-400 Sqft",
       },
       {
         name: "Studio²",
+        slug: "studio-2",
         img: "/images/unit-types/dubai-marina/studio_2.jpg",
         floors: "Floor 1-10",
         area: "350-400 Sqft",
diff --git a/src/main.tsx b/src/main.tsx
index 0080180..3ccfdec 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -25,7 +25,7 @@ const route = createBrowserRouter([
         element: <UnitTypesPage />,
       },
       {
-        path: "/unit-types/:unitType",
+        path: "/unit-types/:unitTypeSlug",
         element: <UnitTypeItemPage />,
       },
       {
diff --git a/src/pages/FavouritesPage.tsx b/src/pages/FavouritesPage.tsx
index 6731f70..683a13b 100644
--- a/src/pages/FavouritesPage.tsx
+++ b/src/pages/FavouritesPage.tsx
@@ -15,7 +15,7 @@ import { motion } from "motion/react";
 import FilledHeartIcon from "../components/icons/FilledHeartIcon";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
-import { formattedUnitTypes } from "../data/unitTypes";
+import { formattedUnitTypes } from "../data/formattedUnitTypes";
 
 function FavoritesPage() {
   const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
diff --git a/src/pages/UnitTypeItemPage.tsx b/src/pages/UnitTypeItemPage.tsx
index c2080b8..1636909 100644
--- a/src/pages/UnitTypeItemPage.tsx
+++ b/src/pages/UnitTypeItemPage.tsx
@@ -1,14 +1,42 @@
+import { useNavigate, useParams, useSearchParams } from "react-router";
 import UnitTypeItem from "../components/UnitTypeItem";
-import ApartmentItem from "./ApartmentItem";
+import { useEffect, useState } from "react";
+import { projects } from "../data/projects";
+import Project from "../types/Project";
 
 function UnitTypeItemPage() {
+  const { unitTypeSlug } = useParams<{ unitTypeSlug: string }>();
+
+  const [searchParams] = useSearchParams();
+
+  const [unitType, setUnitType] = useState<Project["types"][number]>();
+
+  useEffect(() => {
+    if (!unitTypeSlug || !searchParams.has("project")) return;
+    setUnitType(
+      projects
+        .find(({ title }) => title === searchParams.get("project"))
+        ?.types.find(({ slug }) => slug === unitTypeSlug)
+    );
+  }, [searchParams, unitTypeSlug]);
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    if (!searchParams.has("project")) navigate("/unit-types");
+  }, [navigate, searchParams]);
+
+  if (!unitType) return <div>Unit type not found</div>;
+
   return (
     <div>
       <UnitTypeItem
-        project="Rove Home Marasi Drive"
-        title="Studio Flex"
-        floor={[5, 21]}
-        wing="East Wing"
+        project={searchParams.get("project")!}
+        title={unitType!.name}
+        area={unitType!.area}
+        floor={unitType!.floors}
+        wing={unitType!.wings}
         texts={[
           "In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living.",
           "Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
@@ -18,23 +46,6 @@ function UnitTypeItemPage() {
           desc: "Live in the future, today",
         }}
       />
-      <ApartmentItem
-        project="Rove Home Marasi Drive"
-        title="Studio² — Type A"
-        floor={11}
-        wing="East Wing"
-        number="E-503"
-        sqft={607.08}
-        suite={485.67}
-        balcony={121.42}
-        price={1668888}
-        status="Available"
-        parkingSpace={1}
-        video={{
-          title: "ORI Cloud Bed",
-          desc: "Live in the future, today",
-        }}
-      />
     </div>
   );
 }
diff --git a/src/types/UnitType.ts b/src/types/UnitType.ts
index 6016bb4..3eb73d3 100644
--- a/src/types/UnitType.ts
+++ b/src/types/UnitType.ts
@@ -1,5 +1,6 @@
 export default interface UnitType {
   name: string;
+  slug: string;
   img: string;
   wings?: string;
   floors: string;