diff --git a/.env b/.env index 11804ce..0b988dc 100644 --- a/.env +++ b/.env @@ -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 \ No newline at end of file diff --git a/src/components/FloorPlanDubaiMarina.tsx b/src/components/FloorPlanDubaiMarina.tsx new file mode 100644 index 0000000..78fb9e6 --- /dev/null +++ b/src/components/FloorPlanDubaiMarina.tsx @@ -0,0 +1,54 @@ +import { rooms } from "../data/room-masks/dubai-marina"; + +interface FloorPlanDubaiMarinaProps { + selectedFloor: string | null; +} + +function FloorPlanDubaiMarina({ + selectedFloor, + ...props +}: FloorPlanDubaiMarinaProps & React.SVGProps) { + return ( + + + {rooms.map((room) => ( + { + console.log(room.text.unitNumber); + }} + > + + + + {selectedFloor} + {room.text.unitNumber.padStart(2, "0")} + + + {room.text.unitType} + + + + ))} + + ); +} + +export default FloorPlanDubaiMarina; diff --git a/src/components/FloorSelect.tsx b/src/components/FloorSelect.tsx index bdf97d8..fb484f2 100644 --- a/src/components/FloorSelect.tsx +++ b/src/components/FloorSelect.tsx @@ -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(), }); + function handleFloorClick(floor: string) { + onSelect(floor.split(" ").at(-1)!); + } + return (
@@ -89,11 +105,17 @@ function FloorSelect({ complexName }: { complexName: string }) { floorsMasks[complexName as keyof typeof floorsMasks] ).map(([floorTitle, d]) => ( 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" + )} /> ))} diff --git a/src/components/FloorSidebar.tsx b/src/components/FloorSidebar.tsx new file mode 100644 index 0000000..c5029f1 --- /dev/null +++ b/src/components/FloorSidebar.tsx @@ -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 ( +
+ {children} + +
+ ); +} + +export default FloorSidebar; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0b3c2e6..60b34fa 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -36,7 +36,7 @@ function Header() { return ( <> -
+
) => ( - - - {rooms.map((room) => ( - { - console.log(room.text.unitNumber); - }} - > - - - - {room.text.unitNumber} - - - {room.text.unitType} - - - - ))} - -); -export default TestComponent; diff --git a/src/components/UnitTypeBadge.tsx b/src/components/UnitTypeBadge.tsx new file mode 100644 index 0000000..54b7f44 --- /dev/null +++ b/src/components/UnitTypeBadge.tsx @@ -0,0 +1,17 @@ +interface UnitTypeBadgeProps { + type: string; + count: number; +} + +function UnitTypeBadge({ type, count }: UnitTypeBadgeProps) { + return ( +
+
+

{count}

+
+

{type}

+
+ ); +} + +export default UnitTypeBadge; diff --git a/src/layout/LayoutWithoutFooter.tsx b/src/layout/LayoutWithoutFooter.tsx index 52f9efc..e46cd96 100644 --- a/src/layout/LayoutWithoutFooter.tsx +++ b/src/layout/LayoutWithoutFooter.tsx @@ -5,7 +5,7 @@ function LayoutWithoutFooter() { return (
-
+
diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx index 6a39fad..73f3ae6 100644 --- a/src/pages/FloorsPage.tsx +++ b/src/pages/FloorsPage.tsx @@ -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(null); - return ; + 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(), + }); + + return ( +
+ + setSelectedFloor(null)} + > + {complexName === "dubai-marina" && ( +
+
+

{selectedFloor} floor

+
+
+

16 Apartments

+
+
+

Combinable

+
+
+
+ +
+
+