apartment page desc

client/src/components/apartmentPage/StudioDescriptionSection.tsx

@@ -1,32 +1,100 @@
 // import { formatNumber } from "../../calc/formatNumber";
+import { IAparmentRes } from "../../types/apartmentsRes";
 
-const StudioDescriptionSection = () => {
+interface IApartmentDesc {
+  title: string;
+  subTitle?: string;
+  firstParagraph: string;
+  secondParagraph: string;
+  id: string;
+  totalArea: string;
+  cost: string;
+  apartmentType: string;
+}
+
+const apartmentDescriptions: IApartmentDesc[] = [
+  {
+    title: "Studio Flex",
+    subTitle: "Live in the future, today.",
+    firstParagraph:
+      "Live in the future, today. In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living.",
+    secondParagraph:
+      "Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
+    id: "1",
+    totalArea: "Up to 365,54 Sqft",
+    cost: "Unavailiable",
+    apartmentType: "Studio Flex",
+  },
+  {
+    title: "Studio Squared",
+    firstParagraph:
+      "In Studio experience the Flexibed, a smart innovation for modern living",
+    secondParagraph:
+      "When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
+    id: "2",
+    totalArea: "Up to 416,13 Sqft",
+    cost: "Unavailiable",
+    apartmentType: "Studio Squared",
+  },
+  {
+    title: "1 Bedroom",
+    firstParagraph:
+      "In 1 Bedroom double up your space with next generation features that enhance smart living.",
+    secondParagraph:
+      "With pocket walls that disappear and a Flexibed that seamlessly converts, you can transform your living room into an extra bedroom, anytime you want!",
+    id: "3",
+    totalArea: "Up to 770,05 Sqft",
+    cost: "Unavailiable",
+    apartmentType: "1 BR Squared",
+  },
+  {
+    title: "2 Bedroom",
+    firstParagraph:
+      "In 2 Bedroom discover extra functionality with added space and maximum value.",
+    secondParagraph:
+      "Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
+    id: "4",
+    totalArea: "Up to 1057,55 Sqft",
+    cost: "Unavailiable",
+    apartmentType: "2 BR Squared",
+  },
+];
+
+interface StudioDescriptionSectionProps {
+  apartment: IAparmentRes;
+}
+
+const StudioDescriptionSection = ({
+  apartment,
+}: StudioDescriptionSectionProps) => {
+  const apartmentDesc = apartmentDescriptions.find(
+    (aprt) => aprt.apartmentType === apartment.Unit_Type
+  );
   return (
     <section className="grid grid-cols-12 lg:gap-4 gap-3">
       <div className="bg-white rounded-2xl lg:col-span-3 col-span-6 flex flex-col justify-between p-8">
         <div className="flex flex-col">
           <h2 className="text-[#0D1922] text-subheadline-l font-semibold">
-            Studio flex
+            {apartmentDesc?.title}
           </h2>
+          {apartmentDesc?.subTitle && (
             <p className="text-[#00BED7] text-subheadline-s font-semibold">
-            Live in the future, today.
+              {apartmentDesc.subTitle}
             </p>
+          )}
           <div className="flex flex-col gap-[10px] pt-6">
             <p className="text-m text-[#73787C]">
-              Live in the future, today. In Studio Flex explore the ORI Cloud
+              {apartmentDesc?.firstParagraph}
-              Bed, optimizing your living space with functionality and smart
-              living.
             </p>
             <p className="text-m text-[#73787C]">
-              Every inch is designed to provide more space for comfort and
+              {apartmentDesc?.secondParagraph}
-              convenience. This feature increase your unit size by 33%
             </p>
           </div>
         </div>
         <div className="flex flex-col gap-1">
-          <p className="text-[#0D1922B2] text-s">Up to 365,54 Sqft </p>
+          <p className="text-[#0D1922B2] text-s">{apartmentDesc?.totalArea}</p>
           <p className="text-subheadline-s font-semibold text-[#00BED7]">
-            Unvailiable
+            {apartmentDesc?.cost}
           </p>
           {/* <p className="text-subheadline-s font-semibold text-[#00BED7]">
             from AED {formatNumber(1668888, ",", 3, 1)}

client/src/consts/initialMasterplanFilters.ts

@@ -41,7 +41,12 @@ const initialAparmentTypeCheckboxes: ICheckbox[] = [
     selected: false,
     value: "Studio Flex",
   },
-  { title: "Studio", id: "2", selected: false, value: "Studio Squared" },
+  {
+    title: "Studio Squared",
+    id: "2",
+    selected: false,
+    value: "Studio Squared",
+  },
   { title: "1 Bedroom", id: "3", selected: false, value: "1 BR Squared" },
   { title: "2 Bedroom", id: "4", selected: false, value: "2 BR Squared" },
 ];

client/src/main.tsx

@@ -7,7 +7,7 @@ import "./index.css";
 import Complex from "./pages/Complex";
 import ComplexWing from "./pages/ComplexWing";
 import Search from "./pages/Search";
-import ApartmentPage from "./pages/SearchApartment";
+import ApartmentPage from "./pages/Apartment";
 import Favorites from "./pages/Favorites";
 import VirtualTour from "./pages/VirtualTour";
 import AboutComplex from "./pages/AboutComplex";

client/src/pages/Apartment.tsx

@@ -91,9 +91,11 @@ const ApartmentPage = () => {
             <ApartmentSidebar currentApartment={currentApartment} />
           </div>
         )}
+        {currentApartment && (
           <div className="col-span-full">
-          <StudioDescriptionSection />
+            <StudioDescriptionSection apartment={currentApartment} />
           </div>
+        )}
         {/* <div className="col-span-full">
           <SimilarSlider />
         </div> */}