124 lines
4.4 KiB
TypeScript
124 lines
4.4 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { markers } from "../data/markers";
|
|
import { floorsMasks } from "../data/masks";
|
|
import Compass from "./Compass";
|
|
import DisclaimerButton from "./DisclaimerButton";
|
|
import FullScreenButton from "./FullScreenButton";
|
|
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
|
|
import InfoIcon from "./icons/InfoIcon";
|
|
import PrivacyPolicyButton from "./PrivacyPolicyButton";
|
|
import Button from "./ui/Button";
|
|
import { useNavigate } from "react-router";
|
|
import FloorPopup from "./FloorPopup";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { api } from "../api/ky";
|
|
|
|
function FloorSelect({ complexName }: { complexName: string }) {
|
|
const navigate = useNavigate();
|
|
|
|
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
const [hoveredFloor, setHoveredFloor] = useState<string | null>(null);
|
|
const [position, setPosition] = useState<[number, number]>([0, 0]);
|
|
|
|
const rootRef = useRef<HTMLDivElement>(null);
|
|
|
|
function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
|
|
const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
|
|
const y = e.clientY - e.currentTarget.getBoundingClientRect().top;
|
|
|
|
setPosition([x, y]);
|
|
}
|
|
|
|
function handleFullScreenClick() {
|
|
if (!rootRef.current) return;
|
|
setIsFullScreen((prev) => !prev);
|
|
if (isFullScreen) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
rootRef.current.requestFullscreen();
|
|
}
|
|
}
|
|
|
|
const { data } = useQuery({
|
|
queryKey: ["floors-data", complexName],
|
|
queryFn: () =>
|
|
api
|
|
.get(`units/get-floors-data/${complexName}`)
|
|
.json<({ floor: number } & Record<string, number>)[]>(),
|
|
});
|
|
|
|
useEffect(() => {
|
|
console.log(data);
|
|
}, [data]);
|
|
|
|
return (
|
|
<div
|
|
className="overflow-hidden h-full w-full relative"
|
|
ref={rootRef}
|
|
onMouseMove={handleMouseMove}
|
|
>
|
|
<img
|
|
src={`/images/marasi-drive-floors.png`}
|
|
className="h-full w-full object-cover absolute"
|
|
alt=""
|
|
/>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 4096 1752"
|
|
className="absolute top-0 left-0 hidden w-full h-full md:block"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
>
|
|
{Object.entries(
|
|
floorsMasks[complexName as keyof typeof floorsMasks]
|
|
).map(([floorTitle, d]) => (
|
|
<path
|
|
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"
|
|
/>
|
|
))}
|
|
</svg>
|
|
<Compass imgStyle={{ rotate: "180deg" }} />
|
|
<div className="absolute flex 2xl:gap-[0.556vw] justify-between gap-2 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:top-[2.222vw] max-w-full md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-6 left-4 right-4 top-4">
|
|
<Button
|
|
variant="secondary"
|
|
className="!bg-white"
|
|
onClick={() => navigate(`/complex/${complexName}/`)}
|
|
>
|
|
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
|
<ArrowLeftIcon />
|
|
</span>
|
|
<span className="max-md:hidden">Project view</span>
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="small"
|
|
onClick={() => navigate(`/complex/${complexName}/about`)}
|
|
>
|
|
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
|
<InfoIcon />
|
|
</span>
|
|
<span className="max-md:hidden">About</span>
|
|
</Button>
|
|
</div>
|
|
<p className="absolute md:text-h4 text-h5 font-medium text-white -translate-x-1/2 select-none left-1/2 2xl:top-[2.5vw] md:max-2xl:top-[3.646vw] top-[7.5vw] drop-shadow">
|
|
ROVE Home {markers.find((marker) => marker.name === complexName)?.title}
|
|
</p>
|
|
<div className="absolute 2xl:bottom-[2.222vw] 2xl:right-[2.222vw] 2xl:left-[2.222vw] max-w-full flex justify-end items-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:bottom-6 md:max-2xl:left-6 md:max-2xl:right-6 bottom-4 left-4 right-4">
|
|
<DisclaimerButton />
|
|
<PrivacyPolicyButton />
|
|
<FullScreenButton
|
|
isFullScreen={isFullScreen}
|
|
onFullScreenChange={setIsFullScreen}
|
|
onClick={handleFullScreenClick}
|
|
/>
|
|
</div>
|
|
<FloorPopup title={hoveredFloor} position={position} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FloorSelect;
|