113 lines
4.6 KiB
TypeScript
113 lines
4.6 KiB
TypeScript
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";
|
|
import FloorPlanMarasiDrive from "../components/FloorPlanMarasiDrive";
|
|
import RooftopMarasiDrive from "../components/floor-plans/marasi-drive/RooftopMarasiDrive";
|
|
import GroundMarasiDrive from "../components/floor-plans/marasi-drive/GroundMarasiDrive";
|
|
import PodiumMarasiDrive from "../components/floor-plans/marasi-drive/PodiumMarasiDrive";
|
|
import SkyGardenMarasiDrive from "../components/floor-plans/marasi-drive/SkyGardenMarasiDrive";
|
|
import Badge from "../components/ui/Badge";
|
|
|
|
function FloorsPage() {
|
|
const { complexName } = useParams();
|
|
const [selectedFloor, setSelectedFloor] = useState<string | null>(null);
|
|
|
|
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> */}
|
|
<Badge variant="secondary" text="16 Apartments" />
|
|
<Badge variant="primary" text="Combinable" />
|
|
</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)}
|
|
className="2xl:w-[8.333vw]"
|
|
/>
|
|
<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>
|
|
)}
|
|
{complexName === "marasi-drive" && (
|
|
<>
|
|
{selectedFloor === "Rooftop" && <RooftopMarasiDrive />}
|
|
{selectedFloor === "Ground Level" && <GroundMarasiDrive />}
|
|
{selectedFloor === "Podium Level" && <PodiumMarasiDrive />}
|
|
{selectedFloor === "Sky Garden" && <SkyGardenMarasiDrive />}
|
|
{!!parseInt(selectedFloor!) && (
|
|
<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>
|
|
<div className="p-[1.111vw] bg-[#F3F3F2] rounded-[0.833vw]">
|
|
<FloorPlanMarasiDrive selectedFloor={selectedFloor} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</FloorSidebar>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FloorsPage;
|