Remove unused studio-left.jpg image and update NewUnitSlider, UnitCard, and UnitTypeImageWithMarkers components for improved styling and functionality; refactor project data structure for unit types and enhance FavoritesPage and SearchPage components for better filter handling.

src/components/NewUnitSlider.tsx

@@ -65,7 +65,7 @@ function NewUnitSlider({ children }: PropsWithChildren) {
 
   return (
     <div
-      className="relative size-full overflow-hidden bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-xl"
+      className="relative size-full overflow-hidden 2xl:rounded-[1.111vw] rounded-xl border border-[#E2E2DC]"
       {...handlers}
     >
       <motion.div
@@ -76,7 +76,7 @@ function NewUnitSlider({ children }: PropsWithChildren) {
           duration: 0.5,
           ease: "easeInOut",
         }}
-        className="size-full flex relative top-0"
+        className="flex relative top-0 size-full"
       >
         {slides.map((slide) => slide.element)}
       </motion.div>
@@ -84,7 +84,7 @@ function NewUnitSlider({ children }: PropsWithChildren) {
         {slides.map((slide, index) => (
           <Button
             key={slide.text}
-            variant={currentSlide === index ? "cta" : "secondary"}
+            variant={currentSlide === index ? "cta" : "primary"}
             onClick={() => setCurrentSlide(index)}
             className="max-md:hidden"
           >
@@ -92,7 +92,7 @@ function NewUnitSlider({ children }: PropsWithChildren) {
           </Button>
         ))}
       </div>
-      <div className="md:hidden flex absolute bottom-4 left-1/2 gap-1 -translate-x-1/2">
+      <div className="flex absolute bottom-4 left-1/2 gap-1 -translate-x-1/2 md:hidden">
         {slides.map((_, index) => (
           <div
             key={index}

src/components/UnitCard.tsx

@@ -48,12 +48,15 @@ function UnitCard({ unit }: { unit: Unit }) {
             {unit.project || <Skeleton />}
           </p>
           <div className="flex items-center 2xl:gap-[0.556vw] gap-2">
+            {unit.wing && (
+              <>
                 <p className="text-caption-m">
-              <span>
-                {`${unit.unitNo.split("-")[0] === "W" ? "West" : "East"} Wing`}
-              </span>
+                  <span>{unit.wing} Wing</span>
                 </p>
                 <div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
+              </>
+            )}
+
             <p className="text-caption-m">Floor {unit.floor}</p>
             <div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
             <p className="text-caption-m">{unit.unitNo}</p>
@@ -75,16 +78,16 @@ function UnitCard({ unit }: { unit: Unit }) {
         <img
           src={`/images/unit-types/${complexSlug}/${unit.unitTypeVariantSlug}${
             unit.isLoft ? "-lower" : ""
-          }${unit.side ? `-${unit.side}` : "-left"}.jpg`}
+          }${unit.side ? `-${unit.side}` : ""}.jpg`}
           alt=""
           className="object-cover pointer-events-none 2xl:max-h-[19.861vw]"
         />
       </div>
       <div className="flex flex-col 2xl:gap-y-[0.278vw] gap-y-1">
         <p className="text-s">
-          {`${formattedUnitTypes.get(
-            unit.unitType
-          ) || unit.unitType}, ${unit.squareFt.toLocaleString(undefined, {
+          {`${
+            formattedUnitTypes.get(unit.unitType) || unit.unitType
+          }, ${unit.squareFt.toLocaleString(undefined, {
             maximumFractionDigits: 2,
           })} Sqft`}
         </p>

src/components/UnitTypeImageWithMarkers.tsx

@@ -4,8 +4,8 @@ export interface UnitTypeImageWithMarkersProps {
   complexName: string;
   legend: {
     name: string;
-    x: [number, number];
-    y: [number, number];
+    left: { x: number; y: number };
+    right: { x: number; y: number };
     floor?: "lower" | "upper";
   }[];
   floor?: "lower" | "upper";
@@ -59,12 +59,14 @@ function UnitTypeImageWithMarkers({
           isolation: "isolate",
         }}
       />
-      {filteredLegend.map((item, index) => (
+      {filteredLegend.map((item, index) => {
+        const coords = unitTypeVariant?.endsWith("left") ? item.left : item.right;
+        return (
           <rect
             key={`marker-${index}`}
             ref={refRect}
-          x={item.x[unitTypeVariant?.endsWith("left") ? 0 : 1]}
-          y={item.y[unitTypeVariant?.endsWith("left") ? 0 : 1]}
+            x={coords.x}
+            y={coords.y}
             width={16}
             height={16}
             rx={8}
@@ -72,8 +74,11 @@ function UnitTypeImageWithMarkers({
             onMouseEnter={() => setHoveredIndex(index)}
             onMouseLeave={() => setHoveredIndex(null)}
           />
-      ))}
-      {filteredLegend.map((item, index) => (
+        );
+      })}
+      {filteredLegend.map((item, index) => {
+        const coords = unitTypeVariant?.endsWith("left") ? item.left : item.right;
+        return (
           <g
             key={`tooltip-${index}`}
             className={`transition-opacity pointer-events-none max-md:hidden ${
@@ -81,12 +86,8 @@ function UnitTypeImageWithMarkers({
             }`}
           >
             <rect
-            x={
-              item.x[unitTypeVariant?.endsWith("left") ? 0 : 1] +
-              8 -
-              (item.name.length * 8 + 32) / 2
-            }
-            y={item.y[unitTypeVariant?.endsWith("left") ? 0 : 1] - 41}
+              x={coords.x + 8 - (item.name.length * 8 + 32) / 2}
+              y={coords.y - 41}
               width={item.name.length * 8 + 32}
               height={30}
               rx={8}
@@ -94,8 +95,8 @@ function UnitTypeImageWithMarkers({
               className="fill-white"
             />
             <text
-            x={item.x[unitTypeVariant?.endsWith("left") ? 0 : 1] + 8}
-            y={item.y[unitTypeVariant?.endsWith("left") ? 0 : 1] - 26}
+              x={coords.x + 8}
+              y={coords.y - 26}
               textAnchor="middle"
               dominantBaseline="central"
               className="text-sm"
@@ -103,7 +104,8 @@ function UnitTypeImageWithMarkers({
               {item.name}
             </text>
           </g>
-      ))}
+        );
+      })}
     </svg>
   );
 }

src/pages/FavoritesPage.tsx

@@ -344,20 +344,13 @@ function FavoritesPage() {
                       )}
                       {(!removeSimilar ||
                         filteredFavoriteUnits.some(
-                          ({ project, unitNo }) =>
-                            project !== unit.project ||
-                            unitNo[0] !== unit.unitNo[0]
-                        )) && (
+                          ({ wing }) =>
+                            wing !== unit.wing
+                        )) && unit.wing && (
                         <UnitParameter
                           current={currentUnit}
                           paramName="Section"
-                          value={
-                            unit.project === "Rove Home Marasi Drive"
-                              ? `${
-                                  unit.unitNo[0] === "W" ? "West" : "East"
-                                } Wing`
-                              : "—"
-                          }
+                          value={unit.wing}
                         />
                       )}
                       {(!removeSimilar ||

src/pages/SearchPage.tsx

@@ -122,16 +122,28 @@ function SearchPage() {
   });
 
   useEffect(() => {
-    if (allFloors) setFloor([allFloors.min, allFloors.max]);
-  }, [allFloors, project]); // Add project dependency to reset when project changes
+    if (allFloors) {
+      setFloor([allFloors.min, allFloors.max]);
+    } else {
+      setFloor([-1, -1]);
+    }
+  }, [allFloors, project]);
 
   useEffect(() => {
-    if (allCost) setCost([allCost.min, allCost.max]);
-  }, [allCost, project]); // Add project dependency to reset when project changes
+    if (allCost) {
+      setCost([allCost.min, allCost.max]);
+    } else {
+      setCost([-1, -1]);
+    }
+  }, [allCost, project]);
 
   useEffect(() => {
-    if (allArea) setArea([allArea.min, allArea.max]);
-  }, [allArea, project]); // Add project dependency to reset when project changes
+    if (allArea) {
+      setArea([allArea.min, allArea.max]);
+    } else {
+      setArea([-1, -1]);
+    }
+  }, [allArea, project]);
 
   const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
@@ -199,10 +211,6 @@ function SearchPage() {
   useEffect(() => {
     setSelectedUnitTypes([]);
     setView("Any view");
-    // Reset filters to prevent race condition with old filter data
-    setCost([-1, -1]);
-    setFloor([-1, -1]);
-    setArea([-1, -1]);
   }, [project]);
 
   return (

src/types/IUnit.ts

@@ -15,6 +15,6 @@ export interface Unit {
   balconyArea: number;
   wing?: string;
   unitTypeVariantSlug: string;
-  side?: "left" | "right"
-  isLoft: boolean
+  side?: "left" | "right";
+  isLoft: boolean;
 }

src/types/UnitType.ts

@@ -14,8 +14,8 @@ export default interface UnitType {
   interiors: string[]
   legend?: {
     name: string;
-    x: [number, number];
-    y: [number, number];
+    left: { x: number; y: number };
+    right: { x: number; y: number };
     floor?: "lower" | "upper";
   }[];
   tourAvailable?: boolean;