649 lines
27 KiB
TypeScript
649 lines
27 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Transition } from "react-transition-group";
|
|
import FloorPath from "../components/FloorPath";
|
|
import paths from "../data/floorPaths.json";
|
|
import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
|
|
import Button3 from "../components/Button3";
|
|
import InfoIcon from "../components/icons/InfoIcon";
|
|
import Header from "../components/Header";
|
|
import { useNavigate } from "react-router-dom";
|
|
import ArrowRightIcon from "../components/icons/ArrowRightIcon";
|
|
import FloorItem from "../components/Test/FloorItem";
|
|
import { isMobile } from "react-device-detect";
|
|
import FloorPlanSidebar from "../components/complexWingPage/FloorSidebar/FloorPlanSidebar";
|
|
import useModal from "../store/useModal";
|
|
|
|
const floors = [
|
|
"5",
|
|
"6",
|
|
"7",
|
|
"8",
|
|
"9",
|
|
"10",
|
|
"11",
|
|
"12",
|
|
"13",
|
|
"14",
|
|
"15",
|
|
"16",
|
|
"17",
|
|
"18",
|
|
"19",
|
|
"20",
|
|
"21",
|
|
"Sky Garden",
|
|
"24",
|
|
"25",
|
|
"26",
|
|
"27",
|
|
"28",
|
|
"29",
|
|
"30",
|
|
"31",
|
|
];
|
|
|
|
function ComplexWingPage() {
|
|
const { modal } = useModal();
|
|
const ref = useRef<HTMLImageElement>(null);
|
|
const [imageWidth, setImageWidth] = useState(0);
|
|
const [imageHeight, setImageHeight] = useState(0);
|
|
const [scaled, setScaled] = useState(false);
|
|
const [selectedWing, setSelectedWing] = useState<string>();
|
|
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
|
|
const [showPopup, setShowPopup] = useState<boolean>(false);
|
|
const [selectedFloorPath, setSelectedFloorPath] = useState<SVGPathElement>();
|
|
const [hoveredFloor, setHoveredFloor] = useState<string>();
|
|
const navigate = useNavigate();
|
|
const [hoveredWing, setHoveredWing] = useState<string>();
|
|
const [selectedFloor, setSelectedFloor] = useState<string>();
|
|
// const [showFloorPlanSidebar, setShowFloorPlanSidebar] = useState(false);
|
|
const refFloors = useRef<HTMLDivElement>(null);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
function handleResize() {
|
|
if (window.innerHeight > window.innerWidth) {
|
|
setScaled(true);
|
|
} else {
|
|
setScaled(false);
|
|
}
|
|
}
|
|
|
|
function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
|
|
const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
|
|
const y = e.clientY - e.currentTarget.getBoundingClientRect().top;
|
|
|
|
setMousePos([x, y]);
|
|
}
|
|
|
|
function handleMouseEnter(e: React.MouseEvent<SVGPathElement>) {
|
|
if (!e.currentTarget.dataset["wing"]) return;
|
|
|
|
setSelectedFloorPath(e.currentTarget);
|
|
setHoveredWing(e.currentTarget.dataset["wing"]);
|
|
setShowPopup(true);
|
|
}
|
|
|
|
function handleMouseLeave() {
|
|
setShowPopup(false);
|
|
}
|
|
|
|
function handleClick(e: React.MouseEvent<SVGPathElement>) {
|
|
setSelectedWing(e.currentTarget.dataset["wing"]);
|
|
setSelectedFloor(e.currentTarget.dataset["floor"]);
|
|
}
|
|
|
|
function handleLoadedData() {
|
|
setImageWidth(ref.current!.naturalWidth);
|
|
setImageHeight(ref.current!.naturalHeight);
|
|
}
|
|
|
|
function scrollNext() {
|
|
setScrolled(true);
|
|
|
|
refFloors.current?.scrollBy({
|
|
left: 24,
|
|
// behavior: "smooth",
|
|
});
|
|
|
|
// setTimeout(() => {
|
|
setScrolled(false);
|
|
// }, 250);
|
|
}
|
|
|
|
function scrollPrev() {
|
|
setScrolled(true);
|
|
|
|
refFloors.current?.scrollBy({
|
|
left: -24,
|
|
// behavior: "smooth",
|
|
});
|
|
|
|
// setTimeout(() => {
|
|
setScrolled(false);
|
|
// }, 250);
|
|
}
|
|
|
|
useEffect(() => {
|
|
handleResize();
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="relative overflow-hidden h-dvh"
|
|
onMouseMove={handleMouseMove}
|
|
>
|
|
<Header />
|
|
|
|
<div
|
|
className={`absolute z-10 bg-white rounded-2xl w-[344px] transition-[opacity,transform] duration-300 p-6 space-y-4 pointer-events-none select-none ${
|
|
selectedFloorPath?.dataset["wing"] === "West"
|
|
? "-translate-x-[calc(100%+16px)]"
|
|
: "translate-x-4"
|
|
} -translate-y-[50%] ${showPopup ? "opacity-100" : "opacity-0"}`}
|
|
style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
|
|
>
|
|
<div className="flex items-start justify-between pb-4 border-b border-[#E2E2DC]">
|
|
<div className="space-y-1">
|
|
<p className="text-xl text-[#0D1922] font-semibold">
|
|
{selectedFloorPath?.dataset["floor"] === "Sky Garden"
|
|
? selectedFloorPath?.dataset["floor"]
|
|
: `${selectedFloorPath?.dataset["floor"]} floor`}
|
|
</p>
|
|
<p className="text-xs font-semibold">
|
|
{selectedFloorPath?.dataset["floor"] !== "Sky Garden" &&
|
|
`${selectedFloorPath?.dataset["wing"]} Wing`}
|
|
</p>
|
|
</div>
|
|
<div className="bg-[#00BED7] rounded-full px-2 py-[3px]">
|
|
<p className="text-xs font-semibold text-white">
|
|
{selectedFloorPath?.dataset["wing"] === "West" ? (
|
|
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 17 : 15}</>
|
|
) : (
|
|
16
|
|
)}{" "}
|
|
units
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{selectedFloorPath?.dataset["floor"] !== "Sky Garden" ? (
|
|
<div className="grid grid-cols-2">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
|
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
|
{selectedFloorPath?.dataset["wing"] === "West" ? (
|
|
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 6 : 0}</>
|
|
) : (
|
|
0
|
|
)}
|
|
</p>
|
|
</div>
|
|
<p className="text-sm">Studio Flex</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
|
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
|
{selectedFloorPath?.dataset["wing"] === "West" ? (
|
|
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 3 : 5}</>
|
|
) : (
|
|
7
|
|
)}
|
|
</p>
|
|
</div>
|
|
<p className="text-sm">Studio²</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
|
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
|
{selectedFloorPath?.dataset["wing"] === "West" ? (
|
|
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 6 : 8}</>
|
|
) : (
|
|
8
|
|
)}
|
|
</p>
|
|
</div>
|
|
<p className="text-sm">1 Bedroom²</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
|
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
|
{selectedFloorPath?.dataset["wing"] === "West" ? (
|
|
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 2 : 2}</>
|
|
) : (
|
|
1
|
|
)}
|
|
</p>
|
|
</div>
|
|
<p className="text-sm">2 Bedroom²</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
|
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
|
3
|
|
</p>
|
|
</div>
|
|
<p className="text-sm">Indoor Amenties</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 bg-[#00BED7] rounded-full flex items-center justify-center pr-px">
|
|
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
|
17
|
|
</p>
|
|
</div>
|
|
<p className="text-sm">Outdoor Amenties</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="absolute top-0 left-0 z-10 w-full">
|
|
<div className="p-4 mt-14">
|
|
<div className="flex gap-2 max-sm:justify-between">
|
|
<Button3
|
|
icon={<ArrowLeftIcon />}
|
|
onlyIcon
|
|
onClick={() => navigate("..")}
|
|
/>
|
|
<Button3
|
|
variant="secondary"
|
|
icon={<InfoIcon />}
|
|
onClick={() => navigate("/about-projects")}
|
|
className="max-sm:hidden"
|
|
>
|
|
About Projects
|
|
</Button3>
|
|
<Button3
|
|
variant="secondary"
|
|
icon={<InfoIcon />}
|
|
onlyIcon
|
|
onClick={() => navigate("/about-projects")}
|
|
className="sm:hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* {isMobile && (
|
|
<div className="absolute top-36 left-[50%] -translate-x-[50%] z-10">
|
|
{!selectedWing ? (
|
|
<div className="space-y-1 font-semibold text-center text-white">
|
|
<p>ROVE Home Marasi Drive</p>
|
|
<p className="text-xs">Select a wing</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1 font-semibold text-center text-white">
|
|
<p>{selectedWing} Wing</p>
|
|
<p className="text-xs">Select a floor</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)} */}
|
|
|
|
<div
|
|
className="transition-all duration-300"
|
|
style={{
|
|
transform: `translateX(${selectedFloor ? -25 : 0}%)`,
|
|
}}
|
|
>
|
|
<div className={`h-dvh ${scaled ? "scale-150 -translate-x-[1%]" : ""}`}>
|
|
<img
|
|
ref={ref}
|
|
src="/images/sequenceWing.jpg"
|
|
alt=""
|
|
className="object-cover w-full h-full"
|
|
onLoad={() => handleLoadedData()}
|
|
/>
|
|
|
|
<svg
|
|
viewBox={`0 0 ${imageWidth} ${imageHeight}`}
|
|
preserveAspectRatio="xMidYMid slice"
|
|
className="absolute top-0 left-0 w-full h-full"
|
|
>
|
|
{!isMobile ? (
|
|
paths.map((path, index) => (
|
|
<FloorPath
|
|
key={index}
|
|
{...path}
|
|
selected={
|
|
path["data-wing"] && path["data-floor"]
|
|
? path["data-wing"] === hoveredWing &&
|
|
path["data-floor"] === hoveredFloor
|
|
: false
|
|
}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
onClick={handleClick}
|
|
/>
|
|
))
|
|
) : (
|
|
<>
|
|
<g
|
|
className={`transition-opacity duration-300 ${
|
|
selectedWing
|
|
? "opacity-100"
|
|
: "opacity-0 pointer-events-none"
|
|
}`}
|
|
>
|
|
{paths
|
|
.filter((path) => path["data-wing"] === selectedWing)
|
|
.map((path, index) => (
|
|
<FloorPath
|
|
key={index}
|
|
{...path}
|
|
selected={
|
|
path["data-wing"] && path["data-floor"]
|
|
? path["data-wing"] === selectedWing &&
|
|
path["data-floor"] === hoveredFloor
|
|
: false
|
|
}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
onClick={handleClick}
|
|
/>
|
|
))}
|
|
</g>
|
|
<g
|
|
className={`transition-opacity duration-300 ${
|
|
selectedWing
|
|
? "opacity-0 pointer-events-none"
|
|
: "opacity-100"
|
|
}`}
|
|
>
|
|
<path
|
|
d="M1441.29,1493.16v23.81l-.29,1034.35h0v24.45c0,1.73,1.11,3.26,2.76,3.8l138.35,45.23c.76.25,1.57.27,2.34.04l316.3-90.81c.23-.06.46-.11.7-.13l58.15-5.9,3.6-.53.29-1015.83c0-2.21-1.79-4-4-4h-58.11l-321.31-34.62c-.3-.03-.6-.03-.9.01l-134.36,16.16c-2.01.24-3.52,1.94-3.52,3.97Z"
|
|
className={`fill-[#00bed7]/20`}
|
|
onClick={() => setSelectedWing("East")}
|
|
/>
|
|
<path
|
|
d="M2446,1515.51v-25.79c0-2.13-1.68-3.89-3.81-3.99l-136.64-6.53c-.32-.02-.64.01-.96.07l-28.81,5.68-249.29,22.69h-59c-2.21,0-4,1.79-4,4l-.29,1015.83,3.81.34,58.82,2.71c.25.01.5.04.74.1l248.44,59.2c.36.09.71.23,1.04.41l23.43,13.25c.75.43,1.62.6,2.48.49l140.27-18.21c1.99-.26,3.48-1.96,3.48-3.97v-24.64l.29-1041.64Z"
|
|
className={`fill-[#00bed7]/20`}
|
|
onClick={() => setSelectedWing("West")}
|
|
/>
|
|
</g>
|
|
</>
|
|
)}
|
|
<g className="sm:hidden">
|
|
<text
|
|
transform="translate(1965 1074.41)"
|
|
className="text-5xl font-semibold fill-white"
|
|
textAnchor="middle"
|
|
>
|
|
<tspan>
|
|
{!selectedWing
|
|
? "ROVE Home Marasi Drive"
|
|
: `${selectedWing} Wing`}
|
|
</tspan>
|
|
</text>
|
|
<text
|
|
transform="translate(1965 1141.41)"
|
|
className="text-4xl font-semibold fill-white"
|
|
textAnchor="middle"
|
|
>
|
|
<tspan x="0" y="0">
|
|
{!selectedWing ? "Select a wing" : "Select a floor"}
|
|
</tspan>
|
|
</text>
|
|
</g>
|
|
|
|
<g>
|
|
<rect
|
|
x={2068}
|
|
y={1234}
|
|
width={224}
|
|
height={56}
|
|
rx={24}
|
|
ry={24}
|
|
style={{
|
|
fill: "#000",
|
|
opacity: 0.4,
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<g>
|
|
<path
|
|
d="M2105.55,1273.23l-6.47-22.91h4.46l4.13,16.83h.21l4.41-16.83h4.06l4.42,16.85h.2l4.13-16.85h4.46l-6.47,22.91h-4.09l-4.59-16.07h-.18l-4.6,16.07h-4.09Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M2145.74,1264.51c0-1.51-.21-2.81-.63-3.9-.42-1.09-.99-1.99-1.72-2.7s-1.56-1.23-2.51-1.57c-.94-.34-1.94-.51-3-.51-1.64,0-3.07.37-4.28,1.12-1.22.75-2.16,1.79-2.84,3.13-.68,1.34-1.01,2.89-1.01,4.66s.34,3.36,1.01,4.68c.67,1.32,1.63,2.35,2.88,3.07,1.25.72,2.74,1.08,4.46,1.08,1.33,0,2.52-.2,3.56-.61,1.04-.41,1.89-.98,2.56-1.72s1.12-1.61,1.36-2.61l-3.78-.43c-.18.48-.44.89-.79,1.22s-.76.58-1.24.74c-.48.17-1.01.25-1.6.25-.88,0-1.65-.19-2.3-.56-.66-.38-1.17-.92-1.53-1.63-.35-.69-.53-1.51-.54-2.47h11.96v-1.24ZM2133.79,1263.02c.04-.67.21-1.3.51-1.87.35-.65.83-1.17,1.46-1.57.63-.4,1.35-.6,2.18-.6.78,0,1.46.18,2.04.53.59.35,1.04.83,1.37,1.44.33.61.5,1.3.5,2.08h-8.07Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M2162.75,1260.59l-3.69.4c-.1-.37-.29-.72-.54-1.05s-.6-.59-1.03-.79c-.43-.2-.96-.3-1.59-.3-.84,0-1.55.18-2.12.55-.57.37-.85.84-.85,1.42,0,.5.18.91.55,1.22.38.31,1,.57,1.87.77l2.93.63c1.63.35,2.84.91,3.63,1.67.79.76,1.19,1.76,1.2,2.99,0,1.08-.32,2.03-.95,2.86s-1.49,1.47-2.59,1.93c-1.1.46-2.37.69-3.8.69-2.1,0-3.8-.44-5.08-1.33s-2.05-2.12-2.29-3.7l3.95-.38c.18.78.56,1.36,1.14,1.76.58.4,1.34.59,2.27.59s1.74-.2,2.32-.59c.59-.4.88-.88.88-1.47,0-.49-.19-.9-.57-1.22-.38-.32-.96-.57-1.75-.74l-2.93-.62c-1.65-.34-2.87-.92-3.66-1.74-.79-.82-1.18-1.85-1.17-3.1,0-1.06.28-1.98.87-2.76s1.4-1.38,2.45-1.81c1.05-.43,2.26-.64,3.63-.64,2.01,0,3.6.43,4.76,1.29s1.88,2.02,2.15,3.48Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M2174.67,1269.9c-.11.03-.27.06-.49.1-.21.04-.45.06-.7.06-.34,0-.64-.05-.92-.16-.28-.1-.5-.3-.67-.59-.17-.29-.25-.7-.25-1.25v-8.88h3.39v-3.13h-3.39v-4.12h-4.05v4.12h-2.44v3.13h2.44v9.55c0,1.07.23,1.97.7,2.68.47.72,1.12,1.24,1.93,1.58.81.34,1.73.49,2.74.46.57-.01,1.06-.07,1.46-.16.4-.09.71-.17.92-.25l-.68-3.17Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M2191.25,1273.23l-6.47-22.91h4.46l4.13,16.83h.21l4.41-16.83h4.06l4.42,16.85h.2l4.13-16.85h4.46l-6.47,22.91h-4.09l-4.59-16.07h-.18l-4.6,16.07h-4.09Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M2220,1253.61c-.64,0-1.19-.21-1.66-.64s-.69-.95-.69-1.55.23-1.13.69-1.56c.46-.43,1.01-.64,1.66-.64s1.2.21,1.66.64c.46.43.69.95.69,1.56s-.23,1.12-.69,1.55c-.46.43-1.01.64-1.66.64ZM2217.96,1273.23v-17.18h4.05v17.18h-4.05Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M2230.22,1263.16v10.07h-4.05v-17.18h3.87v2.92h.2c.39-.96,1.03-1.73,1.9-2.29.87-.57,1.94-.85,3.23-.85,1.19,0,2.22.25,3.1.76.88.51,1.57,1.24,2.06,2.2.49.96.73,2.13.72,3.5v10.94h-4.05v-10.31c0-1.15-.3-2.05-.89-2.7-.59-.65-1.41-.97-2.46-.97-.71,0-1.34.15-1.88.46-.55.31-.98.76-1.29,1.34s-.46,1.29-.46,2.11Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M2252.85,1280.03c-1.45,0-2.7-.2-3.75-.59s-1.88-.92-2.52-1.57c-.63-.66-1.07-1.38-1.32-2.18l3.65-.88c.16.34.4.67.72,1,.31.33.74.61,1.27.83s1.21.33,2.02.33c1.15,0,2.1-.28,2.85-.83.75-.56,1.13-1.47,1.13-2.73v-3.26h-.2c-.21.42-.51.85-.91,1.29s-.92.81-1.58,1.11-1.47.45-2.45.45c-1.32,0-2.52-.31-3.59-.93s-1.92-1.55-2.55-2.8c-.63-1.24-.95-2.8-.95-4.67s.32-3.48.95-4.78c.63-1.3,1.48-2.29,2.56-2.96,1.07-.68,2.27-1.01,3.59-1.01,1.01,0,1.84.17,2.49.51.65.34,1.17.75,1.56,1.22.39.47.68.92.88,1.34h.22v-2.84h3.99v17.46c0,1.47-.35,2.68-1.05,3.65-.7.96-1.66,1.68-2.88,2.16-1.22.48-2.6.72-4.14.72ZM2252.88,1269.81c.86,0,1.59-.21,2.19-.63.6-.42,1.06-1.02,1.38-1.8.31-.78.47-1.72.47-2.82s-.15-2.03-.46-2.84c-.31-.81-.76-1.44-1.36-1.9-.6-.45-1.34-.68-2.21-.68s-1.66.23-2.26.7c-.6.47-1.06,1.11-1.37,1.93-.31.82-.46,1.74-.46,2.78s.15,1.97.46,2.76c.31.79.77,1.4,1.38,1.83s1.36.65,2.24.65Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
</g>
|
|
</g>
|
|
<g>
|
|
<rect
|
|
x={1618}
|
|
y={1234}
|
|
width={224}
|
|
height={56}
|
|
rx={24}
|
|
ry={24}
|
|
style={{
|
|
fill: "#000",
|
|
opacity: 0.4,
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<g>
|
|
<path
|
|
d="M1655.6,1273.23v-22.91h14.9v3.48h-10.75v6.22h9.98v3.48h-9.98v6.25h10.84v3.48h-14.99Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M1679.5,1273.58c-1.09,0-2.07-.2-2.94-.59-.87-.39-1.55-.97-2.06-1.74s-.75-1.72-.75-2.84c0-.97.18-1.77.54-2.4.36-.63.85-1.14,1.47-1.52s1.32-.67,2.1-.87c.78-.2,1.59-.34,2.42-.43,1.01-.1,1.82-.2,2.45-.29.63-.09,1.08-.22,1.37-.4.29-.18.43-.47.43-.86v-.07c0-.84-.25-1.5-.75-1.96-.5-.46-1.22-.69-2.16-.69-.99,0-1.78.22-2.35.65s-.97.94-1.17,1.53l-3.78-.54c.3-1.04.79-1.92,1.48-2.62.69-.7,1.52-1.23,2.52-1.59.99-.35,2.09-.53,3.29-.53.83,0,1.65.1,2.47.29s1.57.51,2.25.96c.68.44,1.22,1.05,1.64,1.81.41.76.62,1.71.62,2.85v11.5h-3.89v-2.36h-.13c-.25.48-.59.92-1.03,1.34-.44.41-1,.75-1.67,1-.67.25-1.45.37-2.34.37ZM1680.55,1270.6c.81,0,1.52-.16,2.11-.49.6-.32,1.06-.75,1.38-1.29.32-.54.49-1.12.49-1.76v-2.02c-.13.1-.34.2-.64.29-.3.09-.64.17-1.01.23-.37.07-.74.13-1.11.18-.37.05-.68.1-.95.13-.6.08-1.15.22-1.62.4-.48.19-.85.45-1.13.78-.28.33-.41.76-.41,1.28,0,.75.27,1.31.82,1.69s1.24.57,2.08.57Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M1706.24,1260.59l-3.69.4c-.1-.37-.29-.72-.54-1.05s-.6-.59-1.03-.79c-.43-.2-.96-.3-1.59-.3-.84,0-1.55.18-2.12.55-.57.37-.85.84-.84,1.42,0,.5.18.91.55,1.22.38.31,1,.57,1.87.77l2.93.63c1.63.35,2.84.91,3.63,1.67.79.76,1.2,1.76,1.2,2.99,0,1.08-.32,2.03-.95,2.86s-1.49,1.47-2.59,1.93-2.37.69-3.8.69c-2.1,0-3.8-.44-5.08-1.33-1.28-.88-2.05-2.12-2.29-3.7l3.95-.38c.18.78.56,1.36,1.14,1.76.58.4,1.34.59,2.27.59s1.74-.2,2.32-.59c.59-.4.88-.88.88-1.47,0-.49-.19-.9-.56-1.22-.38-.32-.96-.57-1.75-.74l-2.93-.62c-1.65-.34-2.87-.92-3.66-1.74-.79-.82-1.18-1.85-1.17-3.1,0-1.06.28-1.98.87-2.76s1.4-1.38,2.45-1.81c1.05-.43,2.26-.64,3.63-.64,2.01,0,3.6.43,4.76,1.29,1.16.86,1.88,2.02,2.15,3.48Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M1718.16,1269.9c-.11.03-.27.06-.49.1-.21.04-.45.06-.7.06-.34,0-.64-.05-.92-.16s-.5-.3-.67-.59c-.17-.29-.25-.7-.25-1.25v-8.88h3.39v-3.13h-3.39v-4.12h-4.05v4.12h-2.44v3.13h2.44v9.55c0,1.07.23,1.97.7,2.68.47.72,1.12,1.24,1.93,1.58.81.34,1.73.49,2.74.46.57-.01,1.06-.07,1.46-.16.4-.09.71-.17.92-.25l-.68-3.17Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M1734.74,1273.23l-6.47-22.91h4.46l4.13,16.83h.21l4.41-16.83h4.06l4.42,16.85h.2l4.13-16.85h4.46l-6.47,22.91h-4.09l-4.59-16.07h-.18l-4.6,16.07h-4.09Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M1763.48,1253.61c-.64,0-1.19-.21-1.66-.64s-.69-.95-.69-1.55.23-1.13.69-1.56c.46-.43,1.01-.64,1.66-.64s1.2.21,1.66.64c.46.43.69.95.69,1.56s-.23,1.12-.69,1.55c-.46.43-1.01.64-1.66.64ZM1761.45,1273.23v-17.18h4.05v17.18h-4.05Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M1773.71,1263.16v10.07h-4.05v-17.18h3.87v2.92h.2c.4-.96,1.03-1.73,1.9-2.29.87-.57,1.94-.85,3.23-.85,1.19,0,2.22.25,3.1.76.88.51,1.57,1.24,2.06,2.2.49.96.73,2.13.72,3.5v10.94h-4.05v-10.31c0-1.15-.3-2.05-.89-2.7-.59-.65-1.41-.97-2.46-.97-.71,0-1.34.15-1.89.46-.55.31-.98.76-1.29,1.34s-.46,1.29-.46,2.11Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
<path
|
|
d="M1796.34,1280.03c-1.45,0-2.7-.2-3.75-.59s-1.88-.92-2.52-1.57c-.63-.66-1.07-1.38-1.32-2.18l3.65-.88c.16.34.4.67.72,1,.31.33.74.61,1.27.83.53.22,1.21.33,2.02.33,1.15,0,2.1-.28,2.85-.83s1.13-1.47,1.13-2.73v-3.26h-.2c-.21.42-.51.85-.91,1.29s-.92.81-1.58,1.11c-.65.3-1.47.45-2.46.45-1.32,0-2.51-.31-3.59-.93s-1.92-1.55-2.55-2.8c-.63-1.24-.95-2.8-.95-4.67s.32-3.48.95-4.78,1.48-2.29,2.56-2.96c1.07-.68,2.27-1.01,3.59-1.01,1.01,0,1.84.17,2.49.51.65.34,1.17.75,1.56,1.22.39.47.68.92.88,1.34h.22v-2.84h3.99v17.46c0,1.47-.35,2.68-1.05,3.65-.7.96-1.66,1.68-2.87,2.16-1.22.48-2.6.72-4.14.72ZM1796.37,1269.81c.86,0,1.59-.21,2.19-.63.6-.42,1.06-1.02,1.38-1.8s.47-1.72.47-2.82-.15-2.03-.46-2.84c-.31-.81-.76-1.44-1.36-1.9s-1.34-.68-2.21-.68-1.66.23-2.26.7c-.6.47-1.06,1.11-1.36,1.93-.31.82-.46,1.74-.46,2.78s.16,1.97.46,2.76c.31.79.77,1.4,1.38,1.83.61.44,1.36.65,2.24.65Z"
|
|
style={{
|
|
fill: "#fff",
|
|
strokeWidth: 0,
|
|
}}
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`sm:hidden absolute bottom-0 w-full p-3 transition-opacity duration-300 ${
|
|
selectedWing ? "opacity-100" : "opacity-0 pointer-events-none"
|
|
}`}
|
|
>
|
|
<div className="relative px-4 pt-2 pb-4 space-y-3 bg-white rounded-lg">
|
|
<div className="relative overflow-hidden">
|
|
{/* <div
|
|
id="test"
|
|
className="absolute top-[calc(50%-16px)] left-[calc(50%-16px)] w-8 h-6"
|
|
></div> */}
|
|
<div
|
|
id="test"
|
|
className="absolute h-6 w-[32px] top-[calc(50%-16px)] left-[calc(50%-32px)]"
|
|
></div>
|
|
<div
|
|
ref={refFloors}
|
|
id="floors"
|
|
className="relative flex gap-4 overflow-x-auto px-[calc(50%)] pt-2.5 pb-[18px] snap-x snap-mandatory"
|
|
>
|
|
{floors.map((floor) => (
|
|
<FloorItem
|
|
floor={floor}
|
|
onSelected={() => setHoveredFloor(floor)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none bg-gradient-to-r from-white via-transparent to-white"></div>
|
|
<div>
|
|
<Button3
|
|
variant="secondary"
|
|
icon={<ArrowLeftIcon className="w-4 h-4" />}
|
|
onlyIcon
|
|
className="absolute top-0 left-0 ring-0 w-9 h-9"
|
|
onClick={() => !scrolled && scrollPrev()}
|
|
/>
|
|
<Button3
|
|
variant="secondary"
|
|
icon={<ArrowRightIcon className="w-4 h-4" />}
|
|
onlyIcon
|
|
className="absolute top-0 right-0 ring-0 w-9 h-9"
|
|
onClick={() => !scrolled && scrollNext()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button3
|
|
variant="secondary"
|
|
size="small"
|
|
icon={<ArrowLeftIcon className="w-4 h-4" />}
|
|
className="w-full"
|
|
onClick={() => setSelectedWing(undefined)}
|
|
>
|
|
Back
|
|
</Button3>
|
|
<Button3
|
|
size="small"
|
|
icon={<ArrowRightIcon className="w-4 h-4" />}
|
|
className="flex-row-reverse w-full"
|
|
onClick={() => setSelectedFloor(hoveredFloor)}
|
|
>
|
|
Explore
|
|
</Button3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Transition
|
|
in={!!selectedFloor && !!selectedWing}
|
|
timeout={300}
|
|
mountOnEnter
|
|
unmountOnExit
|
|
>
|
|
{(state) => (
|
|
<div
|
|
className={`absolute top-0 h-dvh bg-[#F3F3F2] right-0 lg:w-1/2 w-full z-10 transition-all duration-300 flex flex-col ${state}`}
|
|
>
|
|
<FloorPlanSidebar
|
|
floor={selectedFloor!}
|
|
wing={selectedWing!}
|
|
onClose={() => setSelectedFloor(undefined)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Transition>
|
|
|
|
{/* <ButtomPanelCompass /> */}
|
|
|
|
{modal}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ComplexWingPage;
|