upd

src/components/UnitTypeItem.tsx

@@ -9,6 +9,7 @@ import UnitSliderItem from "./UnitSliderItem";
 import NewUnitSlider from "./NewUnitSlider";
 import UnitTypeImageWithMarkers from "./UnitTypeImageWithMarkers";
 import UnitImageWithSides from "./UnitImageWithSides";
+import InteriorSlider from "./InteriorSlider";
 
 interface UnitTypeItemProps {
   project: Project;
@@ -31,48 +32,77 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
         {type.slug.includes("-loft") ? (
           <>
             <UnitSliderItem text="Lower">
-              <UnitImageWithSides>
+              {innerWidth >= 768 ? (
+                <UnitImageWithSides>
+                  <UnitTypeImageWithMarkers
+                    complexName={project.slug}
+                    legend={type.legend || []}
+                    floor="lower"
+                    unitTypeVariant={type.slug + "-lower"}
+                  />
+                </UnitImageWithSides>
+              ) : (
                 <UnitTypeImageWithMarkers
                   complexName={project.slug}
                   legend={type.legend || []}
                   floor="lower"
-                  unitTypeVariant={type.slug + "-lower"}
+                  unitTypeVariant={type.slug + "-lower-left"}
                 />
-              </UnitImageWithSides>
+              )}
             </UnitSliderItem>
             <UnitSliderItem text="Upper">
-              <UnitImageWithSides>
+              {innerWidth >= 768 ? (
+                <UnitImageWithSides>
+                  <UnitTypeImageWithMarkers
+                    complexName={project.slug}
+                    legend={type.legend || []}
+                    floor="upper"
+                    unitTypeVariant={type.slug + "-upper"}
+                  />
+                </UnitImageWithSides>
+              ) : (
                 <UnitTypeImageWithMarkers
                   complexName={project.slug}
                   legend={type.legend || []}
                   floor="upper"
-                  unitTypeVariant={type.slug + "-upper"}
+                  unitTypeVariant={type.slug + "-upper-left"}
                 />
-              </UnitImageWithSides>
+              )}
             </UnitSliderItem>
           </>
         ) : (
           <UnitSliderItem text="Layout">
-            <UnitImageWithSides>
+            {innerWidth >= 768 && type.slug !== "2-bedroom-b" ? (
+              <UnitImageWithSides>
+                <UnitTypeImageWithMarkers
+                  complexName={project.slug}
+                  legend={type.legend || []}
+                  unitTypeVariant={type.slug}
+                />
+              </UnitImageWithSides>
+            ) : (
               <UnitTypeImageWithMarkers
                 complexName={project.slug}
                 legend={type.legend || []}
-                unitTypeVariant={type.slug}
+                unitTypeVariant={type.slug + "-left"}
               />
-            </UnitImageWithSides>
+            )}
           </UnitSliderItem>
         )}
-        <UnitSliderItem text="Interior">
-          <img
-            src={`/images/interiors/${project.slug}/${
-              project.slug === "marasi-drive"
-                ? type.slug.split("-").slice(0, 2).join("-")
-                : type.slug
-            }.png`}
-            alt=""
-            className="object-cover h-full pointer-events-none 2xl:rounded-[1.111vw] rounded-2xl"
-          />
-        </UnitSliderItem>
+        {innerWidth >= 1440 ? (
+          <UnitSliderItem text="Interior">
+            <InteriorSlider
+              unitTypeSlug={type.slug}
+              projectSlug={project.slug}
+            />
+          </UnitSliderItem>
+        ) : (
+          type.interiors.map((interior, index) => (
+            <UnitSliderItem text={`interior ${index + 1}`} key={index}>
+              <img src={interior} alt="" className="size-full object-cover" />
+            </UnitSliderItem>
+          ))
+        )}
       </NewUnitSlider>
       <div className="flex flex-col justify-between 2xl:w-[21.944vw] flex-shrink-0">
         <div className="2xl:space-y-[1.667vw] space-y-6">
@@ -102,14 +132,6 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
             </div>
           </div>
           <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
-          {/* {![
-            "1-bedroom-d",
-            "2-bedroom-a",
-            "1-bedroom-loft-a",
-            "1-bedroom-loft-b",
-            "1-bedroom-loft-c",
-          ].includes(type.slug) && (
-          )} */}
           {type.video && (
             <button
               onClick={() => setModal(<VideoModal src={type.video!.src} />)}

src/pages/FavoritesPage.tsx

@@ -17,8 +17,6 @@ import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
 import { formattedUnitTypes } from "../data/formattedUnitTypes";
 import complexNameToSlug from "../utils/complexNameToSlug";
-import { getUnitTypeVariantDubaiMarina } from "../utils/getUnitTypeVariantDubaiMarina";
-import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive";
 
 function FavoritesPage() {
   const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
@@ -257,11 +255,9 @@ function FavoritesPage() {
                       <img
                         src={`/images/unit-types/${complexNameToSlug(
                           unit.project
-                        )}/${
-                          unit.project === "Rove Home Marasi Drive"
-                            ? getUnitTypeVariantMarasiDrive(unit.unitNo)
-                            : getUnitTypeVariantDubaiMarina(unit.unitNo)
-                        }.jpg`}
+                        )}/${unit.unitTypeVariantSlug}${
+                          unit.isLoft ? "-lower" : ""
+                        }${unit.side ? `-${unit.side}` : "-left"}.jpg`}
                         className="object-cover pointer-events-none"
                         alt=""
                       />
@@ -275,12 +271,11 @@ function FavoritesPage() {
                           current={currentUnit}
                           paramName="Price"
                           value={
-                            unit.projectSlug === "dubai-marina"
-                              ? "—"
-                              : `AED ${Intl.NumberFormat("ar-AE", {
-                                  currency: "AED",
-                                  minimumFractionDigits: 0,
-                                }).format(unit.salesPrice)}`
+                            "—"
+                            // `AED ${Intl.NumberFormat("ar-AE", {
+                            //     currency: "AED",
+                            //     minimumFractionDigits: 0,
+                            //   }).format(unit.salesPrice)}`
                           }
                         />
                       )}
@@ -305,11 +300,10 @@ function FavoritesPage() {
                           current={currentUnit}
                           paramName="Suite area"
                           value={
-                            unit.projectSlug === "dubai-marina"
-                              ? "—"
-                              : `${unit.suitsArea.toLocaleString(undefined, {
-                                  maximumFractionDigits: 2,
-                                })} Sqft`
+                            "—"
+                            // `${unit.suitsArea.toLocaleString(undefined, {
+                            //     maximumFractionDigits: 2,
+                            //   })} Sqft`
                           }
                         />
                       )}
@@ -331,11 +325,10 @@ function FavoritesPage() {
                           current={currentUnit}
                           paramName="Balcony area"
                           value={
-                            unit.projectSlug === "dubai-marina"
-                              ? "—"
-                              : `${unit.balconyArea.toLocaleString(undefined, {
-                                  maximumFractionDigits: 2,
-                                })} Sqft`
+                            "—"
+                            // `${unit.balconyArea.toLocaleString(undefined, {
+                            //     maximumFractionDigits: 2,
+                            //   })} Sqft`
                           }
                         />
                       )}

src/pages/UnitPage.tsx

@@ -83,13 +83,7 @@ function UnitPage() {
                       (unit.side ? `-${unit.side}` : "")
                     }
                     floor="lower"
-                    legend={
-                      projects
-                        .find((project) => project.slug === unit.projectSlug)
-                        ?.types.find(
-                          (type) => type.slug === unit.unitTypeVariantSlug
-                        )?.legend || []
-                    }
+                    legend={unitType?.legend || []}
                   />
                 </UnitSliderItem>
                 <UnitSliderItem text="Upper">
@@ -101,13 +95,7 @@ function UnitPage() {
                       (unit.side ? `-${unit.side}` : "")
                     }
                     floor="upper"
-                    legend={
-                      projects
-                        .find((project) => project.slug === unit.projectSlug)
-                        ?.types.find(
-                          (type) => type.slug === unit.unitTypeVariantSlug
-                        )?.legend || []
-                    }
+                    legend={unitType?.legend || []}
                   />
                 </UnitSliderItem>
               </>
@@ -119,13 +107,7 @@ function UnitPage() {
                     unit.unitTypeVariantSlug +
                     (unit.side ? `-${unit.side}` : "")
                   }
-                  legend={
-                    projects
-                      .find((project) => project.slug === unit.projectSlug)
-                      ?.types.find(
-                        (type) => type.slug === unit.unitTypeVariantSlug
-                      )?.legend || []
-                  }
+                  legend={unitType?.legend || []}
                 />
               </UnitSliderItem>
             )}