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">
-            <p className="text-caption-m">
-              <span>
-                {`${unit.unitNo.split("-")[0] === "W" ? "West" : "East"} Wing`}
-              </span>
-            </p>
-            <div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
+            {unit.wing && (
+              <>
+                <p className="text-caption-m">
+                  <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,51 +59,53 @@ function UnitTypeImageWithMarkers({
           isolation: "isolate",
         }}
       />
-      {filteredLegend.map((item, index) => (
-        <rect
-          key={`marker-${index}`}
-          ref={refRect}
-          x={item.x[unitTypeVariant?.endsWith("left") ? 0 : 1]}
-          y={item.y[unitTypeVariant?.endsWith("left") ? 0 : 1]}
-          width={16}
-          height={16}
-          rx={8}
-          className="stroke-white fill-[#00BED7] hover:fill-white transition-colors cursor-pointer max-md:hidden"
-          onMouseEnter={() => setHoveredIndex(index)}
-          onMouseLeave={() => setHoveredIndex(null)}
-        />
-      ))}
-      {filteredLegend.map((item, index) => (
-        <g
-          key={`tooltip-${index}`}
-          className={`transition-opacity pointer-events-none max-md:hidden ${
-            hoveredIndex === index ? "opacity-100" : "opacity-0"
-          }`}
-        >
+      {filteredLegend.map((item, index) => {
+        const coords = unitTypeVariant?.endsWith("left") ? item.left : item.right;
+        return (
           <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}
-            width={item.name.length * 8 + 32}
-            height={30}
+            key={`marker-${index}`}
+            ref={refRect}
+            x={coords.x}
+            y={coords.y}
+            width={16}
+            height={16}
             rx={8}
-            filter="url(#tooltip-shadow)"
-            className="fill-white"
+            className="stroke-white fill-[#00BED7] hover:fill-white transition-colors cursor-pointer max-md:hidden"
+            onMouseEnter={() => setHoveredIndex(index)}
+            onMouseLeave={() => setHoveredIndex(null)}
           />
-          <text
-            x={item.x[unitTypeVariant?.endsWith("left") ? 0 : 1] + 8}
-            y={item.y[unitTypeVariant?.endsWith("left") ? 0 : 1] - 26}
-            textAnchor="middle"
-            dominantBaseline="central"
-            className="text-sm"
+        );
+      })}
+      {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 ${
+              hoveredIndex === index ? "opacity-100" : "opacity-0"
+            }`}
           >
-            {item.name}
-          </text>
-        </g>
-      ))}
+            <rect
+              x={coords.x + 8 - (item.name.length * 8 + 32) / 2}
+              y={coords.y - 41}
+              width={item.name.length * 8 + 32}
+              height={30}
+              rx={8}
+              filter="url(#tooltip-shadow)"
+              className="fill-white"
+            />
+            <text
+              x={coords.x + 8}
+              y={coords.y - 26}
+              textAnchor="middle"
+              dominantBaseline="central"
+              className="text-sm"
+            >
+              {item.name}
+            </text>
+          </g>
+        );
+      })}
     </svg>
   );
 }