Update environment configuration, enhance FloorSelect component with selection handling, and remove unused TestComponent. Adjust layout styles for better responsiveness.

2025-05-26 19:51:13 +05:00
parent be347bd9e0
commit 7b5d051360
10 changed files with 213 additions and 54 deletions
@@ -1,2 +1,2 @@
-VITE_API_URL=http://192.168.1.170:4002
+VITE_API_URL=http://localhost:4002
 # VITE_API_URL=http://194.26.138.94:4002
@@ -0,0 +1,54 @@
+import { rooms } from "../data/room-masks/dubai-marina";
+
+interface FloorPlanDubaiMarinaProps {
+  selectedFloor: string | null;
+}
+
+function FloorPlanDubaiMarina({
+  selectedFloor,
+  ...props
+}: FloorPlanDubaiMarinaProps & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 632 467.5"
+      className="w-full h-full"
+      {...props}
+    >
+      <image
+        // width={1264}
+        // height={935}
+        transform="scale(.5)"
+        xlinkHref="/images/test.png"
+      />
+      {rooms.map((room) => (
+        <g
+          key={room.id}
+          data-name={room.id}
+          className="fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors"
+          onClick={() => {
+            console.log(room.text.unitNumber);
+          }}
+        >
+          <path d={room.path} />
+          <text
+            transform={`translate(${room.text.x} ${room.text.y})`}
+            className="fill-white text-[9px] select-none"
+            textAnchor="middle"
+          >
+            <tspan x={0} y={0}>
+              {selectedFloor}
+              {room.text.unitNumber.padStart(2, "0")}
+            </tspan>
+            <tspan x={0} y={15}>
+              {room.text.unitType}
+            </tspan>
+          </text>
+        </g>
+      ))}
+    </svg>
+  );
+}
+
+export default FloorPlanDubaiMarina;
@@ -12,6 +12,7 @@ import { useNavigate } from "react-router";
 import FloorPopup from "./FloorPopup";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../api/ky";
+import clsx from "clsx";

 export interface FloorsData {
  floor: number;
@@ -29,7 +30,15 @@ export interface FloorsData {
  };
 }

-function FloorSelect({ complexName }: { complexName: string }) {
+function FloorSelect({
+  complexName,
+  selectedFloor,
+  onSelect,
+}: {
+  complexName: string;
+  selectedFloor: string | null;
+  onSelect: (floor: string) => void;
+}) {
  const navigate = useNavigate();

  const [isFullScreen, setIsFullScreen] = useState(false);
@@ -68,9 +77,16 @@ function FloorSelect({ complexName }: { complexName: string }) {
        .json<FloorsData[]>(),
  });

+  function handleFloorClick(floor: string) {
+    onSelect(floor.split(" ").at(-1)!);
+  }
+
  return (
    <div
-      className="overflow-hidden h-full w-full relative"
+      className={clsx(
+        "overflow-hidden h-full w-full relative transition-transform duration-300",
+        selectedFloor && "-translate-x-1/4"
+      )}
      ref={rootRef}
      onMouseMove={handleMouseMove}
    >
@@ -89,11 +105,17 @@ function FloorSelect({ complexName }: { complexName: string }) {
          floorsMasks[complexName as keyof typeof floorsMasks]
        ).map(([floorTitle, d]) => (
          <path
+            onClick={() => handleFloorClick(floorTitle)}
            onMouseEnter={() => setHoveredFloor(floorTitle)}
            onMouseLeave={() => setHoveredFloor(null)}
            key={floorTitle}
            d={d}
-            className="fill-[#00BED7] cursor-pointer transition-opacity duration-300 opacity-20 hover:opacity-60 peer"
+            className={clsx(
+              "fill-[#00BED7] cursor-pointer transition-opacity duration-300 hover:opacity-60 peer",
+              selectedFloor === floorTitle.split(" ").at(-1)
+                ? "opacity-60"
+                : "opacity-20"
+            )}
          />
        ))}
      </svg>
@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import Button from "./ui/Button";
+import CloseIcon from "./icons/CloseIcon";
+
+interface FloorSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+function FloorSidebar({
+  isOpen = false,
+  children,
+  onClose,
+}: FloorSidebarProps) {
+  return (
+    <div
+      className={clsx(
+        "w-1/2 h-full max-h-full overflow-y-auto absolute right-0 top-0 bg-white z-10 transition-transform duration-300 p-[1.667vw]",
+        isOpen ? "translate-x-0" : "translate-x-full"
+      )}
+    >
+      {children}
+      <Button
+        onlyIcon
+        className="absolute top-[1.667vw] right-[1.667vw]"
+        onClick={onClose}
+      >
+        <span className="w-[1.667vw] h-[1.667vw]">
+          <CloseIcon />
+        </span>
+      </Button>
+    </div>
+  );
+}
+
+export default FloorSidebar;
@@ -36,7 +36,7 @@ function Header() {

  return (
    <>
-      <header className="sticky top-0 left-0 w-full h-14 md:max-2xl:h-16 2xl:h-[max(7.5vh,4.444vw)] flex items-center justify-center bg-white ring ring-[#E2E2DC] z-2">
+      <header className="sticky top-0 left-0 w-full h-14 md:max-2xl:h-16 2xl:h-[4.444vw] flex items-center justify-center bg-white ring ring-[#E2E2DC] z-2">
        <div className="flex 2xl:gap-[1.111vw] gap-4 flex-1">
          <div
            className="2xl:px-[2.222vw] 2xl:py-[1.111vw] md:max-2xl:px-6 max-md:px-4 py-4 cursor-pointer"
@@ -1,43 +0,0 @@
-import { rooms } from "../data/room-masks/dubai-marina";
-
-const TestComponent = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 632 467.5"
-    className="w-full h-full"
-    {...props}
-  >
-    <image
-      // width={1264}
-      // height={935}
-      transform="scale(.5)"
-      xlinkHref="/images/test.png"
-    />
-    {rooms.map((room) => (
-      <g
-        key={room.id}
-        data-name={room.id}
-        className="fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors"
-        onClick={() => {
-          console.log(room.text.unitNumber);
-        }}
-      >
-        <path d={room.path} />
-        <text
-          transform={`translate(${room.text.x} ${room.text.y})`}
-          className="fill-white text-[9px] select-none"
-          textAnchor="middle"
-        >
-          <tspan x={0} y={0}>
-            {room.text.unitNumber}
-          </tspan>
-          <tspan x={0} y={15}>
-            {room.text.unitType}
-          </tspan>
-        </text>
-      </g>
-    ))}
-  </svg>
-);
-export default TestComponent;
@@ -0,0 +1,17 @@
+interface UnitTypeBadgeProps {
+  type: string;
+  count: number;
+}
+
+function UnitTypeBadge({ type, count }: UnitTypeBadgeProps) {
+  return (
+    <div className="flex items-center gap-[0.556vw]">
+      <div className="w-[1.389vw] h-[1.389vw] bg-[#A19E9E] rounded-full flex items-center justify-center">
+        <p className="text-caption-m text-white font-mono">{count}</p>
+      </div>
+      <p className="text-caption-m opacity-70">{type}</p>
+    </div>
+  );
+}
+
+export default UnitTypeBadge;
@@ -5,7 +5,7 @@ function LayoutWithoutFooter() {
  return (
    <div className="flex flex-col select-none min-h-dvh">
      <Header />
-      <div className="2xl:h-[calc(100dvh-max(7.5vh,4.444vw))] md:max-2xl:h-[calc(100dvh-64px)] h-[calc(100dvh-56px)]">
+      <div className="2xl:h-[calc(100dvh-4.444vw)] md:max-2xl:h-[calc(100dvh-64px)] h-[calc(100dvh-56px)]">
        <Outlet />
      </div>
    </div>
@@ -1,10 +1,85 @@
-import FloorSelect from "../components/FloorSelect";
+import FloorSelect, { FloorsData } from "../components/FloorSelect";
 import { useParams } from "react-router";
+import FloorSidebar from "../components/FloorSidebar";
+import FloorPlanDubaiMarina from "../components/FloorPlanDubaiMarina";
+import { useEffect, useState } from "react";
+import Select from "../components/ui/Select";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../api/ky";
+import UnitTypeBadge from "../components/UnitTypeBadge";

 function FloorsPage() {
  const { complexName } = useParams();
+  const [selectedFloor, setSelectedFloor] = useState<string | null>(null);

-  return <FloorSelect complexName={complexName!} />;
+  useEffect(() => {
+    console.log(selectedFloor);
+  }, [selectedFloor]);
+
+  const { data: floorsData } = useQuery({
+    queryKey: ["floors-data", complexName],
+    queryFn: () =>
+      api
+        .get(
+          `units/get-floors-data/Rove Home ${complexName
+            ?.split("-")
+            .map((w) => w[0].toUpperCase() + w.slice(1))
+            .join(" ")}`
+        )
+        .json<FloorsData[]>(),
+  });
+
+  return (
+    <div className="relative h-[calc(100vh-4.444vw)] overflow-hidden">
+      <FloorSelect
+        complexName={complexName!}
+        selectedFloor={selectedFloor}
+        onSelect={setSelectedFloor}
+      />
+      <FloorSidebar
+        isOpen={!!selectedFloor}
+        onClose={() => setSelectedFloor(null)}
+      >
+        {complexName === "dubai-marina" && (
+          <div className="space-y-[1.111vw]">
+            <div className="space-y-[0.556vw] border-b border-[#E2E2DC] pb-[1.667vw]">
+              <p className="text-h4 font-medium">{selectedFloor} floor</p>
+              <div className="flex items-center gap-[0.278vw]">
+                <div className="px-[0.556vw] py-[0.139vw] bg-[#F3F3F2] rounded-[0.278vw]">
+                  <p className="text-caption-s opacity-70">16 Apartments</p>
+                </div>
+                <div className="px-[0.556vw] py-[0.139vw] bg-[#00BED7] rounded-[0.278vw]">
+                  <p className="text-caption-s text-white">Combinable</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-[0.833vw]">
+              <div className="flex items-center gap-[1.111vw]">
+                <Select
+                  options={
+                    floorsData?.map((item) => item.floor.toString()) || []
+                  }
+                  defaultOption={selectedFloor?.toString() || ""}
+                  onSelect={(floor) => setSelectedFloor(floor)}
+                />
+                <div className="divider bg-[#E2E2DC] w-px h-[1.667vw]"></div>
+                <div className="flex items-center gap-[1.667vw]">
+                  <UnitTypeBadge type="Studio Flex" count={1} />
+                  <UnitTypeBadge type="Studio" count={7} />
+                  <UnitTypeBadge type="1 Bedroom" count={3} />
+                  <UnitTypeBadge type="2 Bedroom" count={7} />
+                </div>
+              </div>
+              <div className="p-[1.111vw] bg-[#F3F3F2] rounded-[0.833vw]">
+                <FloorPlanDubaiMarina selectedFloor={selectedFloor} />
+              </div>
+            </div>
+          </div>
+        )}
+      </FloorSidebar>
+    </div>
+  );
 }

 export default FloorsPage;
@@ -1,5 +1,3 @@
-import TestComponent from "../components/TestComponent";
-
 function TestPage() {
  return (
    <div className="relative h-screen">
@@ -346,7 +344,6 @@ function TestPage() {
              aliquid quasi in aperiam!
            </p>
          </div>
-          <TestComponent />
        </div>
      </div>
    </div>