upd
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
import useWingSidebar from "../../store/useWingSidebar";
|
||||
import { IDesctiptionFloor } from "../../types/descriptionFloor";
|
||||
import IUnit from "../../types/IUnit";
|
||||
|
||||
interface FloorDescriptionProps {
|
||||
descriptionFloor: IDesctiptionFloor | null;
|
||||
floorApartments: IUnit[];
|
||||
isLeft: boolean;
|
||||
}
|
||||
|
||||
const FloorDescription = ({
|
||||
descriptionFloor,
|
||||
floorApartments,
|
||||
isLeft,
|
||||
}: FloorDescriptionProps) => {
|
||||
const { isSidebar } = useWingSidebar();
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
|
||||
isSidebar ? "opacity-0" : "opacity-100"
|
||||
}`}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="flex justify-between border-b pb-4">
|
||||
<div className="flex flex-col">
|
||||
<p
|
||||
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out`}
|
||||
>
|
||||
{descriptionFloor?.floor} Floor
|
||||
</p>
|
||||
<p className="text-[#73787C] font-semibold text-caption-m">
|
||||
{descriptionFloor?.wing}
|
||||
</p>
|
||||
</div>
|
||||
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white justify-start self-start">
|
||||
{floorApartments.length} units
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="p-1 flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Flex"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Squared"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">Studio²</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "1 BR Squared"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">1 Bedroom²</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "2 BR Squared"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] text-nowrap">2 Bedroom²</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white absolute top-0 ${
|
||||
!isLeft ? "-left-[35px] -rotate-90" : "-right-[35px] rotate-90"
|
||||
} `}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FloorDescription;
|
||||
@@ -0,0 +1,78 @@
|
||||
import { IAparmentRes } from "../../../types/apartmentsRes";
|
||||
import VirtualTourIcon from "../../icons/VirtualTourIcon";
|
||||
import { apartmentsWithoutVirtualTour } from "../../../consts/apartmentsWithoutVirtualTour";
|
||||
|
||||
interface ApartmentDescriptionProps {
|
||||
isVisible: boolean;
|
||||
descRef: React.LegacyRef<HTMLDivElement>;
|
||||
hoveredApartment: IAparmentRes | null;
|
||||
apartmentDataType: string | null;
|
||||
}
|
||||
|
||||
const ApartmentDescription = ({
|
||||
isVisible,
|
||||
descRef,
|
||||
hoveredApartment,
|
||||
apartmentDataType,
|
||||
}: ApartmentDescriptionProps) => {
|
||||
const wing =
|
||||
hoveredApartment && hoveredApartment.Unit_No.split("-")[0] === "E"
|
||||
? "East Wing"
|
||||
: "West Wing";
|
||||
const isVirtualTourAvailiable =
|
||||
hoveredApartment &&
|
||||
!apartmentsWithoutVirtualTour.some(
|
||||
(aprt) =>
|
||||
aprt.type === hoveredApartment.Unit_Type ||
|
||||
aprt.type === apartmentDataType
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{hoveredApartment && (
|
||||
<div className="p-6 py-3" ref={descRef}>
|
||||
<div
|
||||
className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 ${
|
||||
isVisible ? "opacity-100" : "opacity-0"
|
||||
} duration-300 ease-in-out transition-opacity`}
|
||||
>
|
||||
<h2 className="text-[#0D1922] font-semibold">
|
||||
{hoveredApartment?.Unit_Type},{" "}
|
||||
{hoveredApartment &&
|
||||
Number(hoveredApartment?.Total_Area_Sqft).toFixed(2)}{" "}
|
||||
Sqft
|
||||
</h2>
|
||||
<div className="flex gap-2 items-center text-caption-m font-semibold pt-1 border-b pb-4 justify-start">
|
||||
<p className="text-[#0D1922B2]">{wing}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="text-[#0D1922B2]">Floor {hoveredApartment.Floor}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="text-[#0D1922B2]">{hoveredApartment.Unit_No}</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pt-4 gap-14">
|
||||
<p className="font-semibold text-[#00BED7] text-subheadline-s">
|
||||
Unavailable
|
||||
</p>
|
||||
{/* <p className="font-semibold text-[#00BED7] text-subheadline-s">
|
||||
AED 1,668,888
|
||||
</p> */}
|
||||
{isVirtualTourAvailiable && (
|
||||
<div
|
||||
className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg opacity-100`}
|
||||
>
|
||||
<VirtualTourIcon />
|
||||
<p className="text-caption-m font-semibold text-[#30B216]">
|
||||
3D-tour
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* <div className="w-0 h-0 border-transparent border-t-[14px] border-x-[6px] border-b-0 absolute left-6 -bottom-[13px] border-t-white"></div> */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApartmentDescription;
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,446 @@
|
||||
interface EastWingHighlightingProps {
|
||||
handleOnMouseOut:
|
||||
| (() => void)
|
||||
| ((event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void);
|
||||
handleOnMouseOver: (
|
||||
event: React.MouseEvent<SVGSVGElement, MouseEvent>
|
||||
) => void;
|
||||
handleOnApartmentClick: (
|
||||
e: React.MouseEvent<SVGSVGElement, MouseEvent>
|
||||
) => void;
|
||||
}
|
||||
|
||||
const EastWingHighlighting = ({
|
||||
handleOnMouseOut,
|
||||
handleOnMouseOver,
|
||||
handleOnApartmentClick,
|
||||
}: EastWingHighlightingProps) => {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="672"
|
||||
height="280"
|
||||
fill="none"
|
||||
viewBox="0 0 672 280"
|
||||
>
|
||||
<svg
|
||||
data-type="Studio Squared-Right"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={38}
|
||||
x={215}
|
||||
width="44"
|
||||
height="106"
|
||||
viewBox="0 0 44 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M42.3823 24.9009H0.359375V97.8101H7.9572V105.272H22.6334H34.8467H37.109V100.705H43.7573V79.9505H42.3823V24.9009Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M0.359375 0.260742V24.2741H36.4415V0.260742H0.359375Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="1 BR U1 Left"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={38}
|
||||
x={260}
|
||||
width="79"
|
||||
height="106"
|
||||
viewBox="0 0 79 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.5613 27.1557V0.260742H64.7246V27.1557H12.5613Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M40.135 105.272H42.9899H55.4758H71.5709V100.831H78.1781V27.7953H0.601562V69.6856H6.50497V87.2022H40.135V105.272Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="Studio Squared-Left"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={40}
|
||||
x={342}
|
||||
width="45"
|
||||
height="106"
|
||||
viewBox="0 0 45 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.46074 105.272H7.77297H20.0741H34.5026V97.8198H44.2163V79.9546H42.7182V24.8632H0.527344V100.831H5.46074V105.272Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M44.2343 24.3467V0.260742H6.2179V24.3467H44.2343Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="Studio Squared-Right"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={40}
|
||||
x={388}
|
||||
width="44"
|
||||
height="106"
|
||||
viewBox="0 0 44 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.561732 24.3467V0.260742H38.6071V24.3467H0.561732Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M9.94651 105.272H24.5738H36.8158H39.0738V100.809H43.9301V24.8632H2.1926V79.9546H0.431641V97.8198H9.94651V105.272Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="1 BR Squared-C Right"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={40}
|
||||
x={432}
|
||||
width="71"
|
||||
height="106"
|
||||
viewBox="0 0 71 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.02476 105.272H21.006H33.2654H36.0836V96.3415H70.4738V79.9445H68.4842V24.8632C68.4842 24.7534 23.0364 24.8175 0.3125 24.8632V100.809H7.02476V105.272Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M5.97511 24.3467V0.260742H64.7066V24.3467H5.97511Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="1 BR Squared-C Left"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={40}
|
||||
x={505}
|
||||
width="73"
|
||||
height="106"
|
||||
viewBox="0 0 73 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.13354 24.3467V0.260742H65.0465V24.3467H6.13354Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M34.759 105.272H37.4603H49.7081H63.7972V100.747H72.0123V79.9445H70.5538V24.8632H2.27054V79.9445H0.451172V96.3415H34.759V105.272Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="1 BR Squared-C Left"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={168}
|
||||
x={435}
|
||||
width="71"
|
||||
height="106"
|
||||
viewBox="0 0 71 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.9668 0.661621H6.96945V5.32833H0.261719V80.9172H68.4544V34.4298H70.3789V9.7041H36.3524V0.661621H33.3042H20.9668Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M6.1191 81.578V105.836H64.6981V81.578H6.1191Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="Studio Squared-Left"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={168}
|
||||
x={387}
|
||||
width="44"
|
||||
height="106"
|
||||
viewBox="0 0 44 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.499184 105.836V81.578H38.5893V105.836H0.499184Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M24.5502 0.661621H9.83178V8.07267H0.457031V25.9785H2.14908V80.9172H43.9965V5.32833H39.038V0.661621H36.8668H24.5502Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="Studio Squared-Right"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={170}
|
||||
x={342}
|
||||
width="45"
|
||||
height="106"
|
||||
viewBox="0 0 45 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.84464 0.661621H5.47846V5.3367H0.5625V80.9172H42.7255V25.9785H44.144V8.07267H34.6755V0.661621H19.9571H7.84464Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M6.26025 81.578V105.836H44.1438V81.578H6.26025Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="Studio Squared-Left"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={169}
|
||||
x={298}
|
||||
width="43"
|
||||
height="106"
|
||||
viewBox="0 0 43 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.277344 81.578V105.836H36.6695V81.578H0.277344Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M22.5797 0.661621H8.23243V7.98497H0.277344V80.9172H42.2V5.3367H37.265V0.661621H35.0572H22.5797Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="Studio Squared-Right"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={169}
|
||||
x={255}
|
||||
width="42"
|
||||
height="106"
|
||||
viewBox="0 0 42 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.64475 0.661621H5.31482V5.3367H0.339844V80.9172H41.9907V7.98497H34.5503V0.661621H20.1009H7.64475Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M5.8841 81.578V105.836H41.9907V81.578H5.8841Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="1 BR Squared-C Right"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
x={75}
|
||||
y={168}
|
||||
width="71"
|
||||
height="106"
|
||||
viewBox="0 0 71 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M38.0132 0.661621H35.0456V9.66792H0.753906V25.983H2.51649V80.9811H70.932V5.34202H64.4125V0.661621H50.3588H38.0132Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M65.2246 105.844V81.6648H6.6537V105.844H65.2246Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
data-type="1 BR Squared-C Left"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
y={168}
|
||||
x={2}
|
||||
width="71"
|
||||
height="106"
|
||||
fill="none"
|
||||
viewBox="0 0 71 106"
|
||||
>
|
||||
<path
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
d="M7.344 5.342c0-.198-4.45-.082-6.676 0v75.64h68.289V25.982h1.758V9.668H36.556V.683H21.503c0-.124-9.44-.051-14.159 0v4.659zM6.305 81.794H65.17v24.05H6.305v-24.05z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="2 BR Squared-A Right"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
y={8.94}
|
||||
x={100.12}
|
||||
width="116"
|
||||
height="136"
|
||||
fill="none"
|
||||
viewBox="0 0 116 136"
|
||||
>
|
||||
<path
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
d="M29.82 66.993l3.874 3.874 28.864-29.093-3.722-3.993L29.82 66.993z"
|
||||
></path>
|
||||
<path
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
fillRule="evenodd"
|
||||
d="M.123 46.739l7.559 7.405-5.387 5.61 67.537 67.513v7.842h15.651v-7.299h26.13v-3.193h3.512V61.745h-30.77l-24.789-25.11 5.234-5.58-15.107-15.16-9.099-9.687L.123 46.738zm33.57 24.128l-3.873-3.874L58.836 37.78l3.722 3.993-28.864 29.093z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
d="M115.125 30.26h-3.781a40.718 40.718 0 01-28.515-11.65L64.8.921 50.244 15.348l15.493 15.707-5.15 5.58 24.037 24.306h30.502V30.26z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR U1 Left"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={40.26}
|
||||
x={580.27}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="91"
|
||||
height="106"
|
||||
fill="none"
|
||||
viewBox="0 0 91 106"
|
||||
>
|
||||
<path
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
d="M7.439 31.683V.26h77.623a5.22 5.22 0 015.192 5.765L83.15 73.733a4.176 4.176 0 01-4.153 3.74h-3.315v-45.79H7.44z"
|
||||
></path>
|
||||
<path
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
d="M8.525 105.272h53.067v-3.992h10.89V82.87H68.87V41.562h6.055v-9.45H2.121v47.833H.266v20.802h8.259v4.525z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR U1 Right"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
y={168.26}
|
||||
x={580}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="89"
|
||||
height="106"
|
||||
fill="none"
|
||||
viewBox="0 0 89 106"
|
||||
>
|
||||
<path
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
d="M18.27.662H6.546v4.666H.262v69.043h73.382V64.289h-6.55V23.126h3.422V4.792H59.593V.662H18.27z"
|
||||
></path>
|
||||
<path
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
d="M75.398 75.868H5.453v29.893h77.519a5.22 5.22 0 005.192-5.763l-7.01-67.103a5.22 5.22 0 00-5.191-4.678h-.565v47.65z"
|
||||
></path>
|
||||
</svg>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EastWingHighlighting;
|
||||
@@ -0,0 +1,444 @@
|
||||
function EastWingLayout() {
|
||||
return (
|
||||
<>
|
||||
<path
|
||||
fill="#F0F0E9"
|
||||
d="M.518 153.312v15.856h147.698v99.77h73.911v-99.77h392.397v-25.136H149.887L5.719 146.291l-5.201 7.021z"
|
||||
></path>
|
||||
<path
|
||||
fill="#DAE0E5"
|
||||
d="M1.352 172.98v-5.393h7.562v5.393H1.352zM107.888 167.587h-68.46v9.536h68.46c.526 0 .219-6.357 0-9.536zM76.118 47.53v97.655h91.217v-7.707L77.387 47.53h-1.27zM184.2 137.478v7.707l38.264.453v-8.16H184.2zM138.773 172.296v-4.709h7.072v4.709h-7.072zM149.744 275.925V170.482h31.662v105.443h-31.662zM217.3 170.1v105.825h31.099V172.764h10.11l.762-5.09h-8.446l-2.426 2.426H217.3zM289.306 175.325v-7.993h16.088v7.993h-16.088zM335.76 172.764v-5.09h11.044v5.09H335.76zM377.302 175.719v-8.332l20.11.287v8.045h-20.11zM427.606 172.917v-5.559h12.741v5.559h-12.741zM471.083 177.117v-9.759h34.07v1.315h37.23v76.598h-37.23v-68.154h-34.07zM588.139 166.655h-25.541l-17.139 2.772v75.844h32.979v-72.413h9.701v-6.203zM642.33 172.151v-4.056h11.038v4.056H642.33zM642.33 145.217v-4.246h11.038v4.246H642.33zM570.44 145.358v-4.859h17.454v4.859H570.44zM539.692 136.18v9.577l-68.609-.324v-9.253h68.609zM427.606 145.433v-5.091h12.908v5.091h-12.908zM397.412 137.428v8.005h-20.11v-8.005h20.11zM346.804 140.35v5.083h-12.867v-5.083h12.867zM301.488 127.109v18.529l-48.674-.205v-5.083h7.335v-30.895h7.833v17.654h33.506z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M181.186 197.027h-.673v-7.886h.673v7.886zM180.513 181.255h.673v7.886h-.673v-7.886z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M178.609 197.322v.58H159.23v-17.226h19.379v.579m0 16.067h1.904v-.295m-1.904.295v-16.067m1.904 0h-1.904m1.904 0h.673v7.886m-.673-7.886v7.886m0 7.886h.673v-7.886m-.673 7.886v-7.886m.673 0h-.673"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M181.186 230.932h-.673v-7.886h.673v7.886zM180.513 215.16h.673v7.886h-.673v-7.886z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M178.609 231.226v.58H159.23v-17.225h19.379v.579m0 16.066h1.904v-.294m-1.904.294V215.16m1.904 0h-1.904m1.904 0h.673v7.886m-.673-7.886v7.886m0 7.886h.673v-7.886m-.673 7.886v-7.886m.673 0h-.673"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M217.826 230.932h.672v-7.886h-.672v7.886zM218.498 215.16h-.672v7.886h.672v-7.886z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M220.403 231.226v.58h19.379v-17.225h-19.379v.579m0 16.066h-1.905v-.294m1.905.294V215.16m-1.905 0h1.905m-1.905 0h-.672v7.886m.672-7.886v7.886m0 7.886h-.672v-7.886m.672 7.886v-7.886m-.672 0h.672"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M181.186 264.837h-.673v-7.885h.673v7.885zM180.513 249.066h.673v7.886h-.673v-7.886z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M178.609 265.132v.58H159.23v-17.226h19.379v.58m0 16.066h1.904v-.295m-1.904.295v-16.066m1.904 0h-1.904m1.904 0h.673v7.886m-.673-7.886v7.886m0 7.885h.673v-7.885m-.673 7.885v-7.885m.673 0h-.673"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M217.826 264.837h.672v-7.885h-.672v7.885zM218.498 249.066h-.672v7.886h.672v-7.886z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M220.403 265.132v.58h19.379v-17.226h-19.379v.58m0 16.066h-1.905v-.295m1.905.295v-16.066m-1.905 0h1.905m-1.905 0h-.672v7.886m.672-7.886v7.886m0 7.885h-.672v-7.885m.672 7.885v-7.885m-.672 0h.672"
|
||||
></path>
|
||||
<path fill="#fff" d="M531.834 210.739v.672h-7.315v-.672h7.315z"></path>
|
||||
<path fill="#fff" d="M517.204 211.411v-.672h7.315v.672h-7.315z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M531.834 213.316v24.823h-14.63v-24.823m14.63 0v-1.905m0 1.905h-14.63m0 0v-1.905m14.63 0v-.672h-7.315m7.315.672h-7.315m-7.315 0v-.672h7.315m-7.315.672h7.315m0-.672v.672M546.194 206.93h15.776m13.535 0H561.97m-15.776-3.095h29.311m-29.311-3.327h29.311m-29.311-3.286h29.311m-29.311-3.134h29.311m-29.311-3.439h29.311m-29.311-3.019h29.311m-29.311-3.44h29.311m-29.311-3.21h29.311m-29.311-3.401h29.311m0 32.632H561.97v-3.281M2.53 172.203l6.025-4.308m-6.026 0l6.026 4.308m31.422-4.308l32.998 8.426m0-8.426l-32.997 8.426m34.7-8.426l32.998 8.426m0-8.426l-32.998 8.426m64.416-4.118l6.026-4.308m-6.026 0l6.026 4.308m12.403-27.86l9.621-6.099m-9.621 0l10.25 6.445m16.504.394l38.131-6.839m-38.131 0l38.131 6.839m30.576 0c.161 0 4.164-2.955 6.145-4.433m-6.145 0l6.145 4.433m3.375-18.487l5.037-17.277m-5.037 0l5.037 17.277m66.743 18.537l6.146-4.433m-6.146 0l6.146 4.433m1.763 0l4.432-4.433m-4.432 0l4.432 4.433m30.878 0l19.897-7.405m-19.897 0l19.897 7.405m30.284 0l4.522-4.433m0 4.433l-4.522-4.433m6.346 4.433l6.389-4.433m-6.389 0l6.389 4.433m30.731 0l33.861-8.579m0 8.579l-33.861-8.579m34.792 8.579l33.861-8.579m0 8.579l-33.861-8.579m64.52 8.579l8.06-4.667m-8.06 0l8.06 4.667m1.307 0l7.873-4.667m-7.873 0l7.873 4.667m54.543-.634l10.647-3.242m-10.647 0l10.647 3.242m-10.647 27.439l10.647-3.533m0 3.533l-10.647-3.533m-60.419 4.003l5.923-4.691m.137 4.691l-6.06-4.691m-110.676 8.785l33.861-8.695m0 8.695l-33.861-8.695m-37.565 4.646l6.834-4.646m0 4.646l-6.834-4.646m-5.901 4.646l4.522-4.646m0 4.646l-4.522-4.646m-30.284 7.368l-19.897-7.368m0 7.368l19.897-7.368m-61.263 4.351l4.276-4.276m-4.276 0l4.276 4.276m1.974 0l4.276-4.276m-4.276 0l4.276 4.276m-56.998-4.235l15.573 7.053m0-7.053l-15.573 7.053m-35.587-7.053c.184 0 3.1 2.992 4.535 4.488m0-4.488l-4.535 4.488m292.083 70.232l29.821-11.606m-29.821 0l29.821 11.606"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M257.382 63.9h-42.023v72.91h7.598v7.462h29.152v-4.567h6.648v-20.754h-1.375v-55.05zM215.359 39.26v24.014h36.082V39.261h-36.082z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M274.561 66.156V39.26h52.164v26.895h-52.164zM302.135 144.272h31.436v-4.441h6.607V66.795h-77.576v41.891h5.903v17.516h33.63v18.07z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M347.462 144.272h29.042v-7.452h9.713v-17.865h-1.498V63.863h-42.191v75.968h4.934v4.441zM386.235 63.347V39.26h-38.016v24.086h38.016z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M388.562 63.347V39.26h38.045v24.086h-38.045zM397.947 144.272h29.127v-4.463h4.856V63.863h-41.737v55.092h-1.761v17.865h9.515v7.452z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M441.025 144.272h29.059v-8.93h34.39v-16.398h-1.99v-55.08c0-.11-45.448-.046-68.172 0v75.945h6.713v4.463zM439.975 63.347V39.26h58.732v24.086h-58.732z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M512.134 63.347V39.26h58.912v24.086h-58.912zM540.759 144.272h29.038v-4.525h8.215v-20.803h-1.458v-55.08h-68.283v55.08h-1.82v16.398h34.308v8.93z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M454.966 168.662h-13.998v4.667h-6.707v75.588h68.192V202.43h1.925v-24.726h-34.027v-9.042h-15.385zM440.118 249.578v24.259h58.579v-24.259h-58.579z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M388.5 273.837v-24.259h38.09v24.259H388.5zM412.551 168.662h-14.718v7.411h-9.375v17.906h1.692v54.938h41.848v-75.588h-4.959v-4.667h-14.488z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M349.845 168.662h-2.367v4.675h-4.916v75.58h42.164v-54.938h1.418v-17.906h-9.468v-7.411h-26.831zM348.26 249.578v24.259h37.884v-24.259H348.26z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M298.276 249.578v24.259h36.393v-24.259h-36.393zM320.579 168.662h-14.348v7.323h-7.955v72.932h41.923v-75.58h-4.935v-4.675h-14.685z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M261.644 168.662h-2.33v4.675h-4.975v75.58h41.651v-72.932h-7.441v-7.323h-26.905zM259.883 249.578v24.259h36.107v-24.259h-36.107z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M112.013 168.662h-2.967v9.006H74.754v16.315h1.762v54.998h68.416v-75.639h-6.519v-4.68h-26.4zM139.225 273.844v-24.179H80.654v24.179h58.571z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M9.344 173.342c0-.197-4.45-.082-6.676 0v75.639h68.289v-54.998h1.758v-16.315H38.556v-8.985H23.503c0-.123-9.44-.051-14.159 0v4.659zM8.305 249.794H67.17v24.05H8.305v-24.05z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M127.82 75.993l3.874 3.874 28.864-29.093-3.722-3.993-29.016 29.212z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
fillRule="evenodd"
|
||||
d="M98.123 55.74l7.559 7.404-5.387 5.61 67.537 67.513v7.842h15.65v-7.299h26.131v-3.193h3.512V70.746h-30.771l-24.788-25.11 5.234-5.58-15.107-15.161-9.099-9.687L98.123 55.74zm33.571 24.127l-3.874-3.874 29.016-29.212 3.722 3.994-28.864 29.092z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M213.125 39.26h-3.781a40.72 40.72 0 01-28.515-11.65L162.8 9.921 148.243 24.35l15.493 15.706-5.15 5.58 24.037 24.306h30.502V39.26zM600.271 168.662h-11.724v4.667h-6.284v69.042h73.382v-10.082h-6.55v-41.163h3.422v-18.334h-10.923v-4.13h-41.323z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M657.399 243.868h-69.945v29.893h77.519a5.221 5.221 0 005.192-5.763l-7.01-67.103a5.219 5.219 0 00-5.192-4.678h-.564v47.651z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M587.439 70.683V39.26h77.623a5.22 5.22 0 015.192 5.765l-7.103 67.707a4.175 4.175 0 01-4.153 3.74h-3.314v-45.79h-68.245z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M588.525 144.272h53.067v-3.992h10.891v-18.41h-3.613V80.562h6.055v-9.45h-72.804v47.832h-1.855v20.803h8.259v4.525z"
|
||||
></path>
|
||||
<path fill="#fff" d="M35.177 168.945v11.234h-.66v-11.234h.66z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M35.177 168.945h.55v-2.28h-.55v2.28zm0 0v11.234h-.66v-11.234h.66zm-11.482 0h.522v-2.28h-.521v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M34.531 180.179c-2.78 0-5.445-1.182-7.411-3.286-1.966-2.103-3.07-4.957-3.07-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M112.739 168.945v11.234h.659v-11.234h-.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M112.739 168.945h-.55v-2.28h.55v2.28zm0 0v11.234h.659v-11.234h-.659zm11.481 0h-.521v-2.28h.521v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M113.385 180.179c2.78 0 5.445-1.182 7.411-3.286 1.966-2.103 3.07-4.957 3.07-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M273.315 168.945v11.234h-.659v-11.234h.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M273.315 168.945h.549v-2.28h-.549v2.28zm0 0v11.234h-.659v-11.234h.659zm-11.482 0h.522v-2.28h-.522v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M272.669 180.179c-2.78 0-5.446-1.182-7.411-3.286-1.966-2.103-3.07-4.957-3.07-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M321.393 168.945v11.234h.659v-11.234h-.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M321.393 168.945h-.549v-2.28h.549v2.28zm0 0v11.234h.659v-11.234h-.659zm11.482 0h-.522v-2.28h.522v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M322.039 180.179c2.78 0 5.446-1.182 7.411-3.286 1.966-2.103 3.07-4.957 3.07-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M361.323 168.945v11.234h-.66v-11.234h.66z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M361.323 168.945h.549v-2.28h-.549v2.28zm0 0v11.234h-.66v-11.234h.66zm-11.482 0h.522v-2.28h-.522v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M360.677 180.179c-2.78 0-5.446-1.182-7.412-3.286-1.965-2.103-3.069-4.957-3.069-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M361.323 144.007v-11.234h-.66v11.234h.66z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M361.323 144.007h.549v2.28h-.549v-2.28zm0 0v-11.234h-.66v11.234h.66zm-11.482 0h.522v2.28h-.522v-2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M360.677 132.773c-2.78 0-5.446 1.182-7.412 3.286-1.965 2.103-3.069 4.957-3.069 7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M413.308 168.945v11.234h.659v-11.234h-.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M413.308 168.945h-.549v-2.28h.549v2.28zm0 0v11.234h.659v-11.234h-.659zm11.482 0h-.522v-2.28h.522v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M413.954 180.179c2.78 0 5.446-1.182 7.411-3.286 1.966-2.103 3.07-4.957 3.07-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M413.308 144.007v-11.234h.659v11.234h-.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M413.308 144.007h-.549v2.28h.549v-2.28zm0 0v-11.234h.659v11.234h-.659zm11.482 0h-.522v2.28h.522v-2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M413.954 132.773c2.78 0 5.446 1.182 7.411 3.286 1.966 2.103 3.07 4.957 3.07 7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M305.758 144.007v-11.234h.659v11.234h-.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M305.758 144.007h-.55v2.28h.55v-2.28zm0 0v-11.234h.659v11.234h-.659zm11.481 0h-.522v2.28h.522v-2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M306.403 132.773c2.78 0 5.446 1.182 7.412 3.286 1.965 2.103 3.07 4.957 3.07 7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M238.344 144.007v-11.234h.66v11.234h-.66z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M238.344 144.007h-.549v2.28h.549v-2.28zm0 0v-11.234h.66v11.234h-.66zm11.482 0h-.522v2.28h.522v-2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M238.99 132.773c2.78 0 5.446 1.182 7.412 3.286 1.965 2.103 3.069 4.957 3.069 7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M170.145 144.007v-11.234h.659v11.234h-.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M170.145 144.007h-.549v2.28h.549v-2.28zm0 0v-11.234h.659v11.234h-.659zm11.482 0h-.522v2.28h.522v-2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M170.791 132.773c2.78 0 5.446 1.182 7.411 3.286 1.966 2.103 3.07 4.957 3.07 7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M466.612 168.945v11.234h-.66v-11.234h.66z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M466.612 168.945h.549v-2.28h-.549v2.28zm0 0v11.234h-.66v-11.234h.66zm-11.482 0h.522v-2.28h-.522v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M465.966 180.179c-2.78 0-5.446-1.182-7.412-3.286-1.965-2.103-3.069-4.957-3.069-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M512.497 168.945v11.234h.659v-11.234h-.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M512.497 168.945h-.55v-2.28h.55v2.28zm0 0v11.234h.659v-11.234h-.659zm11.481 0h-.522v-2.28h.522v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M513.143 180.179c2.779 0 5.445-1.182 7.411-3.286 1.966-2.103 3.07-4.957 3.07-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M574.944 168.945v11.234h-.673v-11.234h.673z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M574.944 168.945h.561v-2.28h-.561v2.28zm0 0v11.234h-.673v-11.234h.673zm-11.721 0h.533v-2.28h-.533v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M574.285 180.179c-2.838 0-5.559-1.182-7.566-3.286-2.006-2.103-3.133-4.957-3.133-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M466.612 144.007v-11.234h-.66v11.234h.66z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M466.612 144.007h.549v2.28h-.549v-2.28zm0 0v-11.234h-.66v11.234h.66zm-11.482 0h.522v2.28h-.522v-2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M465.966 132.773c-2.78 0-5.446 1.182-7.412 3.286-1.965 2.103-3.069 4.957-3.069 7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M611.984 168.86v11.234h-.659V168.86h.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M611.984 168.86h.549v-2.28h-.549v2.28zm0 0v11.234h-.659V168.86h.659zm-11.482 0h.522v-2.28h-.522v2.28z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M611.338 180.094c-2.78 0-5.446-1.182-7.411-3.285-1.966-2.104-3.07-4.957-3.07-7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M611.984 144.091v-11.233h-.659v11.233h.659z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M611.984 144.091h.549v2.281h-.549v-2.281zm0 0v-11.233h-.659v11.233h.659zm-11.482 0h.522v2.281h-.522v-2.281z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M611.338 132.858c-2.78 0-5.446 1.181-7.411 3.285-1.966 2.104-3.07 4.957-3.07 7.932"
|
||||
></path>
|
||||
<path fill="#fff" d="M544.1 143.94v-11.233h.662v11.233h-.662z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M544.1 143.94h-.551v2.281h.551v-2.281zm0 0v-11.233h.662v11.233h-.662zm11.523 0h-.524v2.281h.524v-2.281z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="1.04 1.04"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.209"
|
||||
d="M544.748 132.707c2.79 0 5.465 1.181 7.438 3.285 1.972 2.104 3.08 4.957 3.08 7.932"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
fillRule="evenodd"
|
||||
d="M137.217 12.854L149.275.347l.958-.347.402.347-.402.508.779.804.503-.377.377.377v.73l-12.469 12.695-.348-.356-.48.48L98.124 55.74l7.558 7.406-5.387 5.608 67.538 67.514v7.842h1.604v2.185H5.709l2.039-2.113h67.229v-97.4l2.108 2.107v95.293h78.622v-16.729L91.03 62.822l-1.867-1.865 1.762-1.72 5.635-5.5 40.388-40.026.565-.56-.296-.297zm29.606 125.705v5.55h-8.985v-14.528l8.985 8.978zM2.67 249.794H7.432v25.119H68.14v-25.248h2.82v-.684H2.669v.813zm64.502 0H8.307v24.05h58.865v-24.05z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
fillRule="evenodd"
|
||||
d="M75.064 271.651l.41-.41v-21.576h1.044V193.983h-1.762v-16.315h34.292v-9.006h2.967v-2.034H35.892v2.055h2.666v8.985h34.158v16.315H70.96V249.665h1.232v21.576l.41.41h.703v-.41h1.272v.41h.488zM40.17 176.198v-8.193h32.546v8.193H40.17zm34.586.031v-8.194h32.546v8.194H74.756zM2.67 166.628H.499V249.794H0v21.319l.41.41h.703v-.41h.898v.41h.488l.683-.683v-21.046H2.67v-76.452c2.225-.082 6.676-.197 6.676 0v-4.659c4.72-.051 14.159-.123 14.159 0v-2.055H2.67zm5.766 5.432v-4.055H2.67v4.055h5.766z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
fillRule="evenodd"
|
||||
d="M79.466 249.665v25.248h60.972v-25.248h4.496v30.309h38.917v-10.798h31.582v10.798h39.009v-30.396h4.244v25.403h77.082v-25.403h3.995v21.576l.41.41h.703v-.41h1.272v.41h.488l.41-.41v-21.576h3.896v25.403h80.835v-25.403h3.852v21.576l.41.41h.703v-.41h1.273v.41h.488l.41-.41v-21.576h3.979v25.403h60.953v-25.403h86.362v-5.71H657.4v-48.77h-1.754v47.273h-73.383v-69.042h6.285v-4.667h11.723v-2.034h-24.726v62.261h-29.25v-57.083h16.834v-5.178h-38.937v2.034h15.321v33.768h-7.566v6.783h7.566v33.158h-30.197v-33.158h7.885v-6.783H506.5v-33.768h5.334v-2.034h-44.529v2.034h3.048v9.042h34.026v24.726h-1.924v46.487h-68.193v-75.588h6.708v-4.667h13.997v-2.034h-30.098v2.034h2.171v4.667h4.958v75.588h-41.847v-54.938h-1.692v-17.906h9.375v-7.411h14.718v-2.034h-50.593v2.034h14.719v7.411h9.468v17.906h-1.418v54.938h-42.163v-75.58h4.916v-4.675h2.366v-2.034h-16.788v2.034h2.207v4.675h4.935v75.58h-41.922v-72.932h7.955v-7.323h14.347v-2.034h-46.479v2.034h14.449v7.323h7.441v72.932h-41.651v-75.58h4.975v-4.675h2.33v-2.034h-46.213v49.992h1.921v-8.775h29.22v31.067h-29.22v-8.816h-1.921v20.236h1.921v-9.404h29.22v32.2h-29.22v-9.11h-1.921v3.988h-31.582v-3.988h-2.235v9.11h-29.337v-32.2h29.337v9.404h2.332v-20.236h-2.332v8.816h-29.337v-31.067h29.337v8.775h2.332v-20.278h-2.332v9.404h-29.337v-32.404h29.337v9.131h2.332v-15.845h-59.587v2.034h14.053v4.68h6.52v75.639H76.518v.684H139.227v24.179H80.656v-24.179h-1.19zm466.829-7.294V231.28h29.25v11.091h-29.25zm-401.361-74.336h-5.622v4.025h5.622v-4.025zm109.407 0v4.025h4.021v-4.025h-4.021zm35.483 6.836v-6.836h15.182v6.836h-15.182zm50.377-6.836h-3.925v3.944h3.925v-3.944zm6.289 0h-3.925v3.944h3.925v-3.944zm31.423 6.929v-6.929h19.045v6.929h-19.045zm54.085-6.929h-3.993v4.056h3.993v-4.056zm2.264 0v4.056h5.806v-4.056h-5.806zm37.592 8.141v-8.141h32.525v8.141h-32.525zm110.409-4.17v-3.971h5.232v3.971h-5.232zM259.885 273.837v-24.259h36.107v24.259h-36.107zm38.394 0v-24.259h36.392v24.259h-36.392zm49.984 0v-24.259h37.883v24.259h-37.883zm40.238-24.259v24.259h38.09v-24.259h-38.09zm51.619 24.259v-24.259h58.579v24.259H440.12zm-222.766-100.5v32.409h29.22v-32.409h-29.22z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
d="M127.82 75.993l3.874 3.874 28.865-29.093-3.722-3.993-29.017 29.212z"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
fillRule="evenodd"
|
||||
d="M139.423 15.084l-.348-.356-.48.48 9.098 9.687.551-.546L162.8 9.922l18.03 17.687a40.718 40.718 0 0028.514 11.652h3.782v94.356h-3.513v3.193h-26.13v7.299h-1.703v2.185h55.855v-2.022h-14.676v-7.462h-7.598V63.9h42.023v55.05h1.375v20.755h-6.648v4.567h-2.263v2.022h55.144v-2.022h-2.855v-18.07h-33.63v-17.516h-5.903v1.112h4.742v16.404h-6.339v-7.252h1.597V66.796h77.576v73.035h-6.607v4.441h-16.095v2.022h32.297v-2.022h-2.313v-4.441h-4.933V63.863h42.191v55.092h1.498v17.865h-9.714v7.452h-14.428v2.022h50.499v-2.022h-14.627v-7.452h-9.515v-17.865h1.761V63.863h41.738v75.946h-4.857v4.463h-2.258v2.022h30.19v-2.022h-13.981v-4.463h-6.713V63.863c22.724-.046 68.172-.11 68.172 0v55.081h1.99v16.397h-34.39v8.931h-2.819v2.022h76.196v-2.022h-2.701v-8.931h-34.308v-16.397h1.819v-55.08h68.284v55.08h1.458v20.803h-8.215v4.525H555.71v2.022h44.608v-2.022h-11.792v-4.525h-8.259v-20.803h1.855V71.112h72.804v9.45h-6.055v41.308h3.613v18.41h-10.891v3.992h-28.981v2.022h1.67v20.334h.65v-20.334h41.877v-1.644h-1.125v-26.687h2.273a6.265 6.265 0 006.232-5.624l6.923-67.392a6.265 6.265 0 00-6.232-6.905h-78.64v32.64h-4.014v-7.335h-1.265V41.77l-.41-.41h-.488v.41h-1.273v-.41h-.703l-.41.41v21.577h-5.784V38.042h-60.95v25.305h-3.762V41.77l-.41-.41h-.488v.41h-1.272v-.41h-.703l-.41.41v21.577h-4.049V38.042h-60.975v25.305h-4.078V41.77l-.41-.41h-.488v.41h-1.273v-.41h-.703l-.41.41v21.577h-3.766V38.042h-80.828v25.305h-3.831V41.77l-.41-.41h-.488v.41h-1.273v-.41h-.702l-.41.41v21.577h.376v2.809h-12.246V38.042h-54.53v28.114h-10.553v-2.882h-1.176V41.698l-.41-.41h-.488v.41h-1.273v-.41h-.702l-.41.41v21.576h-5.763V38.031h-42.776a41.763 41.763 0 01-29.516-12.218L162.8 8.293l-15.452 15.221-7.925-8.43zm75.938 48.19V39.261h36.082v24.013h-36.082zm-30.766 75.285v6.24h37.233v-6.24h-37.233zm68.608 2.289v3.951h5.556v-3.951h-5.556zm7.804 3.951v-16.903h39.926v16.903h-39.926zm73.525-4.006v4.006h5.648v-4.006h-5.648zm7.997 0v4.006h3.933v-4.006h-3.933zm35.294-2.92v6.926h19.2v-6.926h-19.2zm-103.26-98.612v26.895h52.164V39.26h-52.164zm111.673 0v24.086h-38.017V39.26h38.017zm2.327 0v24.086h38.046V39.26h-38.046zm51.413 0v24.086h58.732V39.26h-58.732zm72.159 0v24.086h58.913V39.26h-58.913zm75.305 0v31.422h68.244v45.79h3.315a4.175 4.175 0 004.153-3.741l7.103-67.707a5.22 5.22 0 00-5.192-5.764H587.44zM431.932 144.799h-3.965v-3.987h3.965v3.987zm8.138-3.987h-5.757v3.987h5.757v-3.987zm31.784-3.992v7.979h32.525v-7.979h-32.525zm34.599 0v7.979h32.518v-7.979h-32.518zm64.399 3.992v3.987h7.162v-3.987h-7.162zm9.415 0v3.987h7.098v-3.987h-7.098zm62.529.629v2.831h9.688v-2.831h-9.688z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
d="M74.977 46.78l2.108 2.108 12.078 12.07 1.762-1.72L78.071 46.78h-3.094zM147.693 24.895l15.107 15.16-5.233 5.58 24.788 25.11h30.771v-.804h-30.503l-24.037-24.306 5.151-5.58-15.493-15.706-.551.546z"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
fillRule="evenodd"
|
||||
d="M655.646 195.098v-26.89h1.163v-1.58h-44.197v2.034h28.982v4.13h10.923v18.334h-3.421v41.163h6.55v-37.191zm-12.85-26.436v3.019h9.721v-3.019h-9.721z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
d="M586.207 249.578v25.31h78.842a6.264 6.264 0 006.23-6.914l-7.014-67.262a6.264 6.264 0 00-6.23-5.614h-.635v1.119h.564a5.22 5.22 0 015.192 4.678l7.009 67.103a5.22 5.22 0 01-5.192 5.763h-77.519v-29.893h-1.247v5.71zM559.868 186.908h1.903v29.982h-1.903v-29.982z"
|
||||
></path>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default EastWingLayout;
|
||||
@@ -0,0 +1,157 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
|
||||
import useModal from "../../../store/useModal";
|
||||
import EastWingFloorLayout from "./EastWingFloorLayout";
|
||||
import Button from "../../Button";
|
||||
import CloseIcon from "../../icons/CloseIcon";
|
||||
import useWingSidebar from "../../../store/useWingSidebar";
|
||||
import api from "../../../utils/api";
|
||||
import UnitPopup from "./UnitPopup";
|
||||
import IUnit from "../../../types/IUnit";
|
||||
import WestWingFloorLayout from "./WestWingFloorLayout";
|
||||
import WestWingBottomFloorLayout from "./WestWingBottomFloorLayout";
|
||||
import UnitModal from "../../modals/UnitModal";
|
||||
|
||||
interface Props {
|
||||
currentFloor: IDesctiptionFloor | null;
|
||||
}
|
||||
|
||||
function FloorSidebar({ currentFloor }: Props) {
|
||||
const { setModal } = useModal();
|
||||
const descRef = useRef(null);
|
||||
const { setIsSidebar } = useWingSidebar();
|
||||
const [hoveredUnit, setHoveredUnit] = useState<IUnit | null>(null);
|
||||
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
|
||||
const [type, setType] = useState<string | null>(null);
|
||||
|
||||
async function getUnit(unitNumber: string) {
|
||||
if (!currentFloor) return;
|
||||
|
||||
try {
|
||||
const result: IUnit[] = await api
|
||||
.get(
|
||||
`units?unitNo=${currentFloor.wing[0]}-${
|
||||
currentFloor.floor
|
||||
}${unitNumber.padStart(2, "0")}`
|
||||
)
|
||||
.json();
|
||||
|
||||
setHoveredUnit(result[0]);
|
||||
} catch (error) {
|
||||
alert((error as Error).message);
|
||||
}
|
||||
}
|
||||
|
||||
function handleOnMouseOver(e: React.MouseEvent<SVGPathElement>) {
|
||||
const unitNumber = e.currentTarget.dataset.number;
|
||||
const type = e.currentTarget.dataset.type;
|
||||
|
||||
if (!unitNumber || !type) return;
|
||||
|
||||
setType(type);
|
||||
console.log("type", type);
|
||||
getUnit(unitNumber);
|
||||
}
|
||||
|
||||
function handleOnMouseOut() {
|
||||
setHoveredUnit(null);
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
if (!hoveredUnit || !type) return;
|
||||
|
||||
setModal(<UnitModal unit={hoveredUnit} type={type} />);
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
const x = e.clientX - window.innerWidth / 2 - 360;
|
||||
const y = e.clientY - 78;
|
||||
setMousePos([x, y]);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={descRef}
|
||||
className="absolute w-full h-[calc(100vh-56px)] right-0 z-30 bg-[#F3F3F2] p-6 top-[56px] flex flex-col"
|
||||
>
|
||||
<div className="flex justify-between pb-4">
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-subheadline-m font-semibold text-[#0D1922]">
|
||||
{currentFloor?.floor} Floor
|
||||
</h1>
|
||||
<p className="text-s text-[#73787C]">{currentFloor?.wing}</p>
|
||||
</div>
|
||||
<Button
|
||||
buttonType="cta"
|
||||
icon={<CloseIcon />}
|
||||
onClick={() => setIsSidebar(false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-[18px] bg-white flex justify-between text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
|
||||
<div className="flex gap-6">
|
||||
<div className="gap-2 flex items-center">
|
||||
<div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
|
||||
<p>Studio Flex</p>
|
||||
</div>
|
||||
<div className="gap-2 flex items-center">
|
||||
<div className="rounded-full bg-[#8299AD] w-3 h-3"></div>
|
||||
<p>Studio</p>
|
||||
</div>
|
||||
<div className="gap-2 flex items-center">
|
||||
<div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
|
||||
<p>1 Bedroom</p>
|
||||
</div>
|
||||
<div className="gap-2 flex items-center">
|
||||
<div className="rounded-full bg-[#BFC9D1] w-3 h-3"></div>
|
||||
<p>1 Bedroom</p>
|
||||
</div>
|
||||
<div className="gap-2 flex items-center">
|
||||
<div className="rounded-full bg-[#B2B8C4] w-3 h-3"></div>
|
||||
<p>2 Bedroom</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
|
||||
{floorApartments.length} units
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<svg className="flex-1 px-10 bg-white font-semibold text-caption-m rounded-2xl py-4">
|
||||
{currentFloor?.wing === "West Wing" ? (
|
||||
currentFloor && currentFloor.floor <= 21 ? (
|
||||
<WestWingBottomFloorLayout
|
||||
handleMouseOver={handleOnMouseOver}
|
||||
handleMouseOut={handleOnMouseOut}
|
||||
handleClick={handleClick}
|
||||
/>
|
||||
) : (
|
||||
<WestWingFloorLayout
|
||||
handleMouseOver={handleOnMouseOver}
|
||||
handleMouseOut={handleOnMouseOut}
|
||||
handleClick={handleClick}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<EastWingFloorLayout
|
||||
handleMouseOver={handleOnMouseOver}
|
||||
handleMouseOut={handleOnMouseOut}
|
||||
handleClick={handleClick}
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</div>
|
||||
<UnitPopup unit={hoveredUnit} type={type} mousePos={mousePos} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorSidebar;
|
||||
@@ -0,0 +1,67 @@
|
||||
import IUnit from "../../../types/IUnit";
|
||||
import VirtualTourIcon from "../../icons/VirtualTourIcon";
|
||||
import unitTypes from "../../../data/unitTypes.json";
|
||||
|
||||
interface Props {
|
||||
unit: IUnit | null;
|
||||
type: string | null;
|
||||
mousePos: [number, number];
|
||||
}
|
||||
|
||||
function UnitPopup({ unit, type, mousePos }: Props) {
|
||||
return (
|
||||
<div
|
||||
className={`absolute top-0 left-0 w-[344px] h-[156px] z-30 p-6 space-y-4 bg-white rounded-2xl shadow-lg transition-opacity pointer-events-none ${
|
||||
unit ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
top: `${mousePos[1]}px`,
|
||||
left: `${mousePos[0]}px`,
|
||||
}}
|
||||
>
|
||||
{unit && type ? (
|
||||
<>
|
||||
<div className="pb-4 border-b border-[#E2E2DC] space-y-1">
|
||||
<p className="text-xl text-[#0D1922] font-semibold">
|
||||
{unit.unitType}, {unit.totalArea} Sqft
|
||||
</p>
|
||||
<div className="text-xs font-semibold flex items-center gap-2">
|
||||
<p>{unit.unitNo[0] === "E" ? "East" : "West"} Wing</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p>Floor {unit.floor}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p>{unit.unitNo}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xl text-[#00BED7] font-semibold">
|
||||
{unit.unitPrice ? (
|
||||
<>
|
||||
AED{" "}
|
||||
{new Intl.NumberFormat("ar-AE", {
|
||||
currency: "AED",
|
||||
})
|
||||
.format(unit.unitPrice)
|
||||
.replaceAll(",", " ")}
|
||||
</>
|
||||
) : (
|
||||
"Unavailable"
|
||||
)}
|
||||
</p>
|
||||
{unitTypes.some(
|
||||
(unitType) => unitType.type === type && unitType.tourAvailable
|
||||
) && (
|
||||
<button className="bg-[#30B21614] text-xs text-[#30B216] font-semibold space-y-1 flex items-center gap-1 px-2 py-1 rounded-lg">
|
||||
<VirtualTourIcon /> 3D tour
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
"Loading..."
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UnitPopup;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,478 @@
|
||||
interface FloorEastWingHighlightingProps {
|
||||
handleOnMouseOut:
|
||||
| (() => void)
|
||||
| ((event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void);
|
||||
handleOnMouseOver: (
|
||||
event: React.MouseEvent<SVGSVGElement, MouseEvent>
|
||||
) => void | (() => void);
|
||||
handleOnApartmentClick: (
|
||||
event: React.MouseEvent<SVGSVGElement, MouseEvent>
|
||||
) => void;
|
||||
}
|
||||
|
||||
function WestWingHighlighting({
|
||||
handleOnMouseOut,
|
||||
handleOnMouseOver,
|
||||
handleOnApartmentClick,
|
||||
}: FloorEastWingHighlightingProps) {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
data-type="1 BR Squared-A Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={40}
|
||||
y={1}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M43.2341 36.4771L32.7082 58.1869L29.3319 56.2506L39.8082 34.7023L43.2341 36.4771Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M28.5005 74.2294L42.5381 81.1479L50.4314 84.8972L51.9701 85.6403L59.349 70.188L58.1451 69.527L72.3281 41.1009L19.0886 15.0072L8.86602 35.7266L9.918 36.2984L0.275391 55.8072L30.2844 70.6783L28.5005 74.2294ZM43.2341 36.4771L32.7082 58.1869L29.3319 56.2506L39.8082 34.7023L43.2341 36.4771Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M10.0694 32.4059L18.7878 14.1246L63.8107 36.2118L66.1586 31.4119C66.8459 30.0068 66.3551 28.3095 65.0241 27.488L21.9939 0.930965C20.4626 -0.0141451 18.45 0.569992 17.6626 2.1881L5.64879 26.8762C4.91348 28.3873 5.54323 30.2083 7.05493 30.9423L10.0694 32.4059Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR Squared-A Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={92}
|
||||
y={41}
|
||||
width="88"
|
||||
height="70"
|
||||
viewBox="0 0 88 70"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M37.4333 47.3867L33.7376 45.5513L44.3549 23.5337L47.9879 25.4442L37.4333 47.3867Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M68.3198 47.3867L77.2296 29.0916L31.8335 7.26571C31.9227 7.16484 32.9092 5.19457 34.1722 2.63713C34.8571 1.25035 36.4724 0.59442 37.9286 1.11561L85.5011 18.1418C87.1993 18.7496 87.9983 20.6935 87.2183 22.3198L75.1849 47.4108C74.4431 48.9575 72.5695 49.5849 71.0459 48.7968L68.3198 47.3867Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.257812 47.2912L1.7471 48.074L9.88156 52.0272L23.6313 58.775L25.5512 55.0764L55.5352 69.7014L65.1629 49.7968L66.264 50.3332L76.2737 29.4883L22.9254 3.71262L8.73526 32.4366L7.68019 31.8754L0.257812 47.2912ZM37.4333 47.3867L33.7376 45.5513L44.3549 23.5337L47.9879 25.4442L37.4333 47.3867Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR U2 Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={126}
|
||||
width="78"
|
||||
height="58"
|
||||
viewBox="0 0 78 58"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.847656 29.9186V31.905V40.8977V52.7401H4.09539V57.6346H57.5094V0.815186H26.4511V4.85119H13.8386V29.9186H0.847656Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M57.8461 9.22863H77.4339V47.9344H57.8461V9.22863Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Squared-Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={184}
|
||||
width="78"
|
||||
height="32"
|
||||
viewBox="0 0 78 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M77.4339 4.21582H59.9175V31.7744H77.4339V4.21582Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M0.847656 3.83763V5.30536V14.3033V24.9006H6.11339V31.7744H19.2304V30.5131H59.4959V0.116943H4.09539V3.83763H0.847656Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Squared-Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={217}
|
||||
width="78"
|
||||
height="33"
|
||||
viewBox="0 0 78 33"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.847656 7.23569V17.9161V26.8653V28.5971H4.09539V32.0826H59.4959V1.50751H19.2304V0.423796H6.11339V7.23569H0.847656Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M77.4339 0.398926H59.9175V28.0973H77.4339V0.398926Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR U2 Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={251}
|
||||
width="78"
|
||||
height="58"
|
||||
viewBox="0 0 78 58"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M77.4328 10.4467H57.8326V48.5921H77.4328V10.4467Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M0.882812 5.72498V17.467V26.4419V28.6878H13.7973V53.2329H26.3883V57.2601H57.4322V0.816895H4.09427V5.72498H0.882812Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Squared-Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={310}
|
||||
width="78"
|
||||
height="32"
|
||||
viewBox="0 0 78 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M59.9425 5.4146H77.4328V31.695H59.9425V5.4146Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M0.882812 5.03001V6.47548V15.4165V26.1621H6.11227V31.695H59.5172V1.32728H19.1782V0.162598H4.09427V5.03001H0.882812Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="2 BR Squared-A Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={343}
|
||||
width="99"
|
||||
height="85"
|
||||
viewBox="0 0 99 85"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M50.6968 62.4116L47.8478 59.5627L69.0706 38.3812L72.0021 41.2714L50.6968 62.4116Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.882812 21.6152V22.9085V31.96V33.1601H6.50805L55.9408 82.5928L59.9338 78.5999L65.3813 84.0474L94.655 54.7737L76.6019 36.6138L72.5931 40.56L54.5146 22.6064V0.348877H8.54341V2.76417H6.11227V21.6152H0.882812ZM50.6968 62.4116L47.8478 59.5627L69.0706 38.3812L72.0021 41.2714L50.6968 62.4116Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M55.0253 0.348877H77.4328V2.84703C77.4328 10.9119 80.6365 18.6464 86.3392 24.3491L98.8228 36.8326L88.1845 47.4709L76.7404 36.0268L72.5931 40.1742L55.0253 22.6064V0.348877Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="2 BR Squared-B Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={4.66}
|
||||
y={492}
|
||||
width="90"
|
||||
height="97"
|
||||
viewBox="0 0 90 97"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.1036 5.09509H0.662109V46.8361H18.1036V5.09509Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M89.5155 19.6333H88.0078H78.9667H77.2382V5.79173H73.8163V0.916504H18.4757V50.221H48.9767V54.6804H55.5607V78.7987H89.5155V19.6333Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M59.227 79.2319V96.211H85.7186V79.2319H59.227Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR Squared-C Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={4.63}
|
||||
y={439}
|
||||
width="78"
|
||||
height="52"
|
||||
viewBox="0 0 78 52"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.1034 4.49092H0.628906V47.2577H18.1034V4.49092Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M77.238 27.2949V25.1743H70.5371V0.437012H50.6172V1.66582H18.4755V51.3945H73.8161V46.4628H77.1584V36.2871L77.238 27.2949Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR Squared-C Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={4.63}
|
||||
y={387}
|
||||
width="78"
|
||||
height="52"
|
||||
viewBox="0 0 78 52"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.628906 47.7823H18.1034V4.83478H0.628906V47.7823Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M73.8161 0.840332H18.4755V50.7118H50.6172V51.8273H70.5371V26.9096H77.238V24.869V15.8135V5.80208H73.8161V0.840332Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Flex-Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
data-apartment="apartments-studio-1"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={9.06}
|
||||
y={279}
|
||||
width="73"
|
||||
height="29"
|
||||
viewBox="0 0 73 29"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.8529 0.00878906H0.0644531V24.141H16.8529V0.00878906Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M72.2048 24.5692V23.078L72.2363 14.2041V3.60853H66.9374V0.00878906H17.238V28.1512H68.8053V24.5692H72.2048Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Flex-Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
data-apartment="apartments-studio-1"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={9.06}
|
||||
y={249}
|
||||
width="73"
|
||||
height="30"
|
||||
viewBox="0 0 73 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.8529 4.74607H0.0644531V29.3672H16.8529V4.74607Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M17.238 0.731445V29.3672H66.9374V25.8529H72.2363V15.0391V5.94945V4.34722H68.7814V0.731445H17.238Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Flex-Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
data-apartment="apartments-studio-1"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={9.06}
|
||||
y={217}
|
||||
width="73"
|
||||
height="31"
|
||||
viewBox="0 0 73 31"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.238 1.41691V30.2271H68.7814V26.5346H72.2363V24.9657V15.9437V3.98155H66.9374V0.365723H49.2652V1.41691H17.238Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M16.8529 0.431123H0.0644531V26.2567H16.8529V1.41691V0.431123Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Flex-Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
data-apartment="apartments-studio-1"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={9.06}
|
||||
y={186}
|
||||
width="73"
|
||||
height="30"
|
||||
viewBox="0 0 73 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.8529 4.13203H0.0644531V29.8606H16.8529V28.5874V4.13203Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M17.238 0.0864258V28.5874H49.2652V29.8341H66.9374V26.2549H72.2363V14.2384V5.51238V3.67383H68.7814V0.0864258H17.238Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Flex-Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
data-apartment="apartments-studio-1"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={9.06}
|
||||
y={156}
|
||||
width="73"
|
||||
height="30"
|
||||
viewBox="0 0 73 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.8529 1.05846H0.0644531V25.5008H16.8529V1.05846Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M17.238 0.952393V29.4774H68.7814V26.0328H72.2363V24.4149V15.368V4.84596H66.9374V0.952393H17.238Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Flex-Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
data-apartment="apartments-studio-1"
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={9.06}
|
||||
y={126}
|
||||
width="73"
|
||||
height="30"
|
||||
viewBox="0 0 73 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M68.7814 0.799072H17.238V29.6647H66.9374V25.8007H72.2363V15.0942V6.11895V4.4029H68.7814V0.799072Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M16.8529 4.83698V29.5578H0.0644531V4.83698H16.8529Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default WestWingHighlighting;
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,416 @@
|
||||
interface WestWingTopLevelsHighlightingProps {
|
||||
handleOnMouseOut:
|
||||
| (() => void)
|
||||
| ((event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void);
|
||||
handleOnMouseOver:
|
||||
| (() => void)
|
||||
| ((event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void);
|
||||
handleOnApartmentClick: (
|
||||
event: React.MouseEvent<SVGSVGElement, MouseEvent>
|
||||
) => void;
|
||||
}
|
||||
|
||||
function WestWingTopLevelsHighlighting({
|
||||
handleOnMouseOut,
|
||||
handleOnMouseOver,
|
||||
handleOnApartmentClick,
|
||||
}: WestWingTopLevelsHighlightingProps) {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
data-type="1 BR Squared-A Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
width="88"
|
||||
height="70"
|
||||
viewBox="0 0 88 70"
|
||||
x={94.26}
|
||||
y={39.61}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M37.4416 47.1579L33.6245 45.3636L44.3253 23.4401L48.0444 25.2018L37.4416 47.1579Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M23.5133 58.544L25.5672 54.8287L55.5142 69.3691L65.2604 49.4993L66.359 50.057L67.937 46.9297L71.0509 48.5517C72.5722 49.3441 74.4475 48.7248 75.1976 47.1822L87.3465 22.1984C88.1364 20.5742 87.3476 18.6233 85.6507 18.0045L37.7803 0.547369C36.3212 0.015281 34.6954 0.666085 34.0066 2.05802L31.5133 7.09591L22.8819 2.98319L8.58992 32.2338L7.57561 31.7343L0.0341797 47.0746L1.58678 47.833L9.67981 51.7864L23.5133 58.544ZM37.4416 47.1579L33.6245 45.3636L44.3253 23.4401L48.0444 25.2018L37.4416 47.1579Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR Squared-A Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
width="73"
|
||||
height="87"
|
||||
viewBox="0 0 73 87"
|
||||
x={41}
|
||||
y={0}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M32.5912 58.5005L28.7741 56.7062L39.4749 34.7827L43.194 36.5444L32.5912 58.5005Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M28.2063 74.5399L42.2919 81.4206L50.3853 85.3742L51.8093 86.0698L59.1424 70.6884L57.9507 70.033L72.2416 40.9286L63.3587 36.7142L66.0572 31.6615C66.8135 30.2455 66.3411 28.4857 64.9774 27.6387L21.7582 0.796817C20.2225 -0.156957 18.1988 0.428848 17.4101 2.0555L5.33356 26.9622C4.61199 28.4504 5.20971 30.2424 6.68015 30.9995L10.161 32.7916L8.74124 35.8939L9.7403 36.3409L0.101562 56.2952L30.07 71.0002L28.2063 74.5399ZM32.5912 58.5005L28.7741 56.7062L39.4749 34.7827L43.194 36.5444L32.5912 58.5005Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR U2 Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
y={125}
|
||||
x={9}
|
||||
width="73"
|
||||
height="57"
|
||||
viewBox="0 0 73 57"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.3466 0.0617676H16.1783V56.5067H69.7002V51.5572H72.9689V39.5828V30.825H72.963V28.6804H59.9008V4.03219H47.0893V0.0617676H17.3466Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M15.6667 3.84307H0.666016V52.4613H15.6667V3.84307Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR U2 Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={125}
|
||||
width="78"
|
||||
height="57"
|
||||
viewBox="0 0 78 57"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.662109 39.7869V51.5515H4.03768V56.4767H57.5102V0.0410156H26.5681V4.05196H13.6902V28.6231H0.662109V30.8402V39.7869Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M57.9663 8.36376H77.5586V46.6439H57.9663V8.36376Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Squared-Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={4.46}
|
||||
y={183}
|
||||
width="77"
|
||||
height="32"
|
||||
viewBox="0 0 77 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M76.9691 5.32577V3.55554H73.7004V0.162842H18.1451V31.8098H21.5662V30.5281H53.9992V31.8224H71.6254V24.8243H76.9691V13.8638V5.32577Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M0.242188 4.14775V31.8098H17.7145V4.14775H0.242188Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Squared-Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={183}
|
||||
width="78"
|
||||
height="32"
|
||||
viewBox="0 0 78 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.662109 14.3096V24.8356H5.8425V31.9174H19.0689V30.5738H59.6759V0.113281H4.03768V3.5896H0.662109V5.22047V14.3096Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M60.0319 4.01643H77.5586V31.9174H60.0319V4.01643Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Squared-Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={4.46}
|
||||
y={216}
|
||||
width="77"
|
||||
height="33"
|
||||
viewBox="0 0 77 33"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M73.7448 32.5354V28.6863H76.9691V27.0022V18.4757V7.36456H71.6254V0.278274H53.9992V1.69553H21.5662V0.254639H18.1451V32.5354H73.7448Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M0.242188 0.254639V28.34H17.7145V0.254639H0.242188Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Squared-Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={216.3}
|
||||
width="78"
|
||||
height="33"
|
||||
viewBox="0 0 78 33"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.12126 28.5608V32.5681H59.6759V1.73959H19.0689V0.337321H5.8425V7.27978H0.662109V18.0732V27.0198V28.5608H4.12126Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M60.0319 0.289307H77.5586V28.4344H60.0319V0.289307Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR U2 Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={9}
|
||||
y={250}
|
||||
width="73"
|
||||
height="57"
|
||||
viewBox="0 0 73 57"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M72.9719 16.7399V4.98665H69.7446V0.0654297H16.1078V56.6636H47.167V52.6935H59.9591V27.8975H72.9719V25.7104V16.7399Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M15.5797 4.03601H0.666016V52.6572H15.5797V4.03601Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR U2 Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={250}
|
||||
width="78"
|
||||
height="57"
|
||||
viewBox="0 0 78 57"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.662109 25.804V27.9046H13.7708V52.7081H26.5361V56.6677H57.4948V0.0319824H4.12126V5.02312H0.662109V16.6865V25.804Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M77.4068 48.2411V9.79336H57.9888V48.2411H77.4068Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="2 BR Squared-A Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={343}
|
||||
width="100"
|
||||
height="84"
|
||||
viewBox="0 0 100 84"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M69.1864 38.0339L72.0786 40.9467L50.681 62.2016L47.8587 59.2904L69.1864 38.0339Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.624023 31.6515V32.9749H6.40788L55.9138 82.4318L59.884 78.3635L65.4718 83.6572L94.9315 54.4612L76.7449 36.347L72.69 40.3426L54.5099 22.2023V0.268311H8.55087V2.78348H5.93509V21.4964H0.624023V22.6533V31.6515ZM69.1864 38.0339L72.0786 40.9467L50.681 62.2016L47.8587 59.2904L69.1864 38.0339Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M99.0468 36.5627L86.9001 24.5394C80.831 18.532 77.4163 10.3472 77.4163 1.80777V0.268311H55.2076V22.2023L72.69 39.7317L76.7449 35.6995L88.3716 47.2062L99.0468 36.5627Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR Squared-C Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={4.46}
|
||||
y={386.57}
|
||||
width="77"
|
||||
height="52"
|
||||
viewBox="0 0 77 52"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M73.7537 5.51381V0.574219H18.2338V50.4153H50.4802V51.6531H70.4037V26.6998H76.9721V24.7513V15.56V5.51381H73.7537Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M17.7952 47.5694V4.83612H0.238281V47.5694H17.7952Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="1 BR Squared-C Right"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={4.46}
|
||||
y={439}
|
||||
width="77"
|
||||
height="52"
|
||||
viewBox="0 0 77 52"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M50.4802 1.63666H18.2338V51.222H73.7027V46.2792H76.9721V36.0496V27.0335V25.1328H70.4037V0.324219H50.4802V1.63666Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M17.7952 4.45175H0.238281V47.0947H17.7952V4.45175Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="2 BR Squared-B Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
x={4.45}
|
||||
y={491.64}
|
||||
width="90"
|
||||
height="97"
|
||||
viewBox="0 0 90 97"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g className="opacity-0 hover:opacity-100 cursor-pointer">
|
||||
<path
|
||||
d="M0.224609 47.0658H17.7949V4.80184H0.224609V47.0658Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M85.7376 96.2551V78.9278H58.9691V96.2551H85.7376Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M78.6838 19.4997H76.9718V5.51494H73.7024V0.63501H18.2335V50.2799H48.7934V54.433H55.3024V78.6627H89.0398H89.4037V19.4997H87.8314H78.6838Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
data-type="Studio Squared-Left"
|
||||
onMouseOut={handleOnMouseOut}
|
||||
onMouseOver={handleOnMouseOver}
|
||||
onClick={handleOnApartmentClick}
|
||||
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
|
||||
x={99}
|
||||
y={310}
|
||||
width="78"
|
||||
height="33"
|
||||
viewBox="0 0 78 33"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.9351 32.593H59.7103V1.90207H19.0635V0.658203H4.00961V5.53797H0.624023V7.06293V16.1567V26.9562H5.9351V32.593Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M77.4163 32.593V6.01846H60.0418V32.593H77.4163Z"
|
||||
fill="#00BED7"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default WestWingTopLevelsHighlighting;
|
||||
@@ -0,0 +1,417 @@
|
||||
const WestWingTopLevelsLayout = () => {
|
||||
return (
|
||||
<>
|
||||
<path
|
||||
fill="#F0F0E9"
|
||||
d="M9.276 359.836v-26.089H81.69V98.61l-6.98-4.613 5.428-11.231.811.394 1.963-3.37 22.908 11.537-1.647 3.122 1.647.8-6.66 14.467.598 46.051v338.325H98.21l-2.31 4.617v11.842H81.388V359.836H9.277z"
|
||||
></path>
|
||||
<path
|
||||
fill="#DAE0E6"
|
||||
d="M79.124 485.687V496.159h3.773v-10.472h-3.773zM75.899 413.335v50.094h7.22v-50.094H75.9zM79.228 385.481v5.699h3.67v-5.699h-3.67zM5.149 381.446h73.784l.342-21.881H5.149v21.881zM4.316 333.942h78.542v-55.689h-13.3v24.921h-12.81v6.72H4.315v24.048zM83.111 244.95h-3.999v9.664h3.999v-9.664zM82.852 222.846h-5.776v-14.589h5.776v14.589zM79.15 176.97v9.22h3.665v-9.22h-3.666zM82.926 122.172v31.102H69.393v-24.592H56.625v-4.732l-27.262-1.277v-26.06H74.65l8.961 3.98v19.601l-.685 1.978zM39.355 57.334l-2.268 4.093 30.201 14.215 1.77-3.706-29.703-14.602zM118.69 96.088l-1.986 3.741-10.437-4.941-7.25 14.593v43.793h12.977v-24.592h13.023v-6.51h22.028v-6.503l-.231-1.016 2.032-4.156-30.156-14.409zM102.715 176.97H98.77v9.22h3.945v-9.22zM104.416 222.846h-5.578v-14.589h5.578v14.589zM102.712 244.777h-3.843v9.837h3.843v-9.837zM112.018 278.253H98.946l-.317 36.031h4.087v-5.356h16.702v-1.304h5.532v-4.686h-12.932v-24.685zM104.298 336.283h-5.53v27.775h5.53v-18.752h2.911v-2.952h-2.911v-6.071zM105.248 376.421h-6.48l-.448.887V493.45h50.965v-72.679l-44.037-44.35z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M112.708 453.528v21.03m2.513 0v-21.03m2.415 21.03v-21.03m2.611 21.03v-21.03m2.342 0v21.03m2.512 0v-21.03m2.416 21.03v-21.03m2.366 21.03v-21.03m2.537 21.03v-21.03m2.513 21.03v-11.222m0-9.808v9.808m0 0h2.391v-9.808M47.74 98.763v21.144m2.513 0V98.763m2.415 21.144V98.763m2.61 21.144V98.763m2.343 0v21.144m2.513 0V98.763m2.415 21.144V98.763m2.366 21.144V98.763m2.538 21.144V98.763m2.295 21.144V98.764M57.074 306.688l11.857-3.226m0 3.226l-11.857-3.368M99.4 313.752c.056-.041 1.933-2.707 2.865-4.034m-2.865 0l2.865 4.034m10.462-6.951l11.808-3.284m0 3.179l-11.808-3.179m-33.237-49.259l2.907-4.156m-2.907 0l2.907 4.156m-2.907-5.72l2.907-3.223m-2.907 0l2.907 3.223m17.05 5.72l2.907-4.156m-2.908 0l2.908 4.156m-2.908-5.72l2.908-3.223m-2.908 0l2.908 3.223m-24.937-25.966l4.971-14.034m-4.971 0l4.971 14.034m17.036 0l4.818-13.92h-4.818l4.818 13.92M79.375 185.77l3.001-2.586m-3 0l3 2.586m-3-4.278l3-4.071m-3 0l3 4.071m17.061 4.278l3.001-2.586m-3 0l3 2.586m-3-4.278l3-4.071m-3 0l3 4.071M57.185 128.33l11.692-3.226m-11.692 0l11.692 3.226m43.833.039l11.886-3.324m0 3.324l-11.886-3.324m-81.427-5.026l5.014-21.249m-5.014 0l5.014 21.249m1.722-58.946l30.304 11.012m-28.835-14.03l27.57 16.967m50.555 24.849l30.303 11.012m-28.835-14.03l27.571 16.966M82.4 386.618l-2.836 4.222m0-4.222l2.836 4.222m17.678-8.437l3.774-5.626m-4.202 0l3.679 5.626m-20.956 31.508l-5.752 23.791m0-23.791l5.752 23.791m0 1.61l-5.752 23.791m0-23.791l5.752 23.791m-2.931 22.847l3.01 4.382v-4.382l-3.01 4.382m0 1.191l3.01 4.382m0-4.382l-3.01 4.382"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M11.664 360.093v.49h5.752v-.49h-5.752zM23.168 360.583v-.49h-5.752v.49h5.752z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeWidth="0.152"
|
||||
d="M11.45 361.972h-.424v14.136h12.565v-14.136h-.423m-11.719 0v-1.389h.215m-.215 1.389h11.72m0-1.389v1.389m0-1.389v-.49h-5.753m5.752.49h-5.752m-5.752 0v-.49h5.752m-5.752.49h5.752m0-.49v.49"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M11.664 333.339v-.491h5.752v.491h-5.752zM23.168 332.848v.491h-5.752v-.491h5.752z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeWidth="0.152"
|
||||
d="M11.45 331.459h-.424v-14.135h12.565v14.135h-.423m-11.719 0v1.389h.215m-.215-1.389h11.72m0 1.389v-1.389m0 1.389v.491h-5.753m5.752-.491h-5.752m-5.752 0v.491h5.752m-5.752-.491h5.752m0 .491v-.491"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M36.55 360.093v.49h5.752v-.49H36.55zM48.054 360.583v-.49h-5.752v.49h5.752z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeWidth="0.152"
|
||||
d="M36.335 361.973h-.423v14.135h12.565v-14.135h-.423m-11.719 0v-1.39h.215m-.215 1.39h11.719m0-1.39v1.39m0-1.39v-.49h-5.752m5.752.49h-5.752m-5.752 0v-.49h5.752m-5.752.49h5.752m0-.49v.49"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M36.55 333.339v-.491h5.752v.491H36.55zM48.054 332.848v.491h-5.752v-.491h5.752z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeWidth="0.152"
|
||||
d="M36.335 331.459h-.423v-14.135h12.565v14.135h-.423m-11.719 0v1.389h.215m-.215-1.389h11.719m0 1.389v-1.389m0 1.389v.491h-5.752m5.752-.491h-5.752m-5.752 0v.491h5.752m-5.752-.491h5.752m0 .491v-.491"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M61.18 333.339v-.491h5.752v.491H61.18zM72.684 332.848v.491h-5.752v-.491h5.752z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeWidth="0.152"
|
||||
d="M60.965 331.459h-.423v-14.135h12.565v14.135h-.423m-11.719 0v1.389h.215m-.215-1.389h11.719m0 1.389v-1.389m0 1.389v.491h-5.752m5.752-.491h-5.752m-5.752 0v.491h5.752m-5.752-.491h5.752m0 .491v-.491"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M121.423 431.529h.49v5.336h-.49v-5.336zM121.913 442.2h-.49v-5.335h.49v5.335z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeWidth="0.152"
|
||||
d="M123.302 431.529h18.106V442.2h-18.106m0-10.671h-1.389m1.389 0V442.2m0 0h-1.389m0-10.671h-.49v5.336m.49-5.336v5.336m0 5.335h-.49v-5.335m.49 5.335v-5.335m-.49 0h.49"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M81.97 188.326v-1.77H78.7v-3.393H23.145v31.647h3.421v-1.282H59v1.294h17.626v-6.998h5.344v-19.498zM5.242 187.148v27.662h17.473v-27.662H5.242z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M78.745 248.535v-3.849h3.224V223.365h-5.344v-7.087H59v1.418H26.566v-1.441h-3.42v32.28h55.599zM5.242 216.255v28.085h17.473v-28.085H5.242zM99.662 197.31v10.526h5.181v7.081h13.226v-1.343h40.607v-30.461h-55.638v3.477h-3.376V197.31zM159.032 187.016h17.527v27.901h-17.527v-27.901z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M103.121 244.561v4.007h55.555V217.74h-40.607v-1.403h-13.226v6.943h-5.18v21.281h3.458zM159.032 216.289h17.527v28.145h-17.527v-28.145zM104.935 341.593h53.775v-30.691h-40.646v-1.244H103.01v4.88h-3.386v21.418h5.311v5.637zM176.416 341.593v-26.575h-17.374v26.575h17.374z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M26.347 125.062h-1.169v56.445H78.7v-4.95h3.269v-20.732h-.006v-2.145H68.901v-24.648H56.089v-3.97H26.347zM24.667 128.843H9.666v48.618h15v-48.618z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M81.972 266.74v-11.753h-3.227v-4.922H25.108v56.599h31.059v-3.97h12.792v-24.796h13.013V266.74zM24.58 254.036H9.666v48.621H24.58v-48.621z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M78.754 391.514v-4.94h-55.52v49.841H55.48v1.238h19.924V412.7h6.568v-21.186h-3.218zM22.795 433.569v-42.733H5.238v42.733h17.557z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M55.48 440.637H23.234v49.585h55.469v-4.943h3.27V464.133h-6.57v-24.809H55.48v1.313zM22.795 443.452H5.238v42.643h17.557v-42.643z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M5.225 538.066h17.57v-42.264H5.225v42.264zM90.738 587.255v-17.327H63.969v17.327h26.769zM83.684 510.5h-1.712v-13.985h-3.27v-4.88H23.234v49.645h30.56v4.153h6.508v24.23h34.102V510.5h-10.72z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
fillRule="evenodd"
|
||||
d="M99.624 374.651v1.324h5.784l49.506 49.457 3.97-4.069 5.588 5.294 29.459-29.196-18.186-18.114-4.055 3.996-18.18-18.141v-21.934h-45.959v2.515h-2.616v18.713h-5.311v10.155zm68.562 6.383l2.893 2.913-21.398 21.255-2.822-2.912 21.327-21.256z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M198.047 379.563L185.9 367.539a31.983 31.983 0 01-9.484-22.731v-1.54h-22.208v21.934l17.482 17.53 4.055-4.032 11.627 11.506 10.675-10.643zM99.662 275.804v2.101h13.109v24.803h12.765v3.96h30.959v-56.636h-53.374v4.991h-3.459v20.781zM176.407 298.241v-38.448h-19.418v38.448h19.418z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
d="M99.662 164.787v11.764h3.376v4.926h53.472v-56.436h-30.942v4.011H112.69v24.571H99.662v11.164zM156.966 133.364h19.593v38.28h-19.593v-38.28zM72.591 59.5l-3.817-1.794 10.7-21.923 3.72 1.761-10.603 21.957z"
|
||||
></path>
|
||||
<path
|
||||
fill="#F3F3F2"
|
||||
fillRule="evenodd"
|
||||
d="M68.206 75.54l14.086 6.88 8.093 3.954 1.424.696 7.333-15.382-1.191-.655 14.291-29.104-8.883-4.215 2.698-5.053a3.046 3.046 0 00-1.08-4.022L61.758 1.797a3.046 3.046 0 00-4.348 1.258L45.334 27.962A3.046 3.046 0 0046.68 32l3.481 1.792-1.42 3.102 1 .447-9.64 19.954L70.07 72l-1.864 3.54zm4.385-16.04l-3.817-1.794 10.7-21.923 3.72 1.761-10.603 21.957z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M130.442 87.158l-3.817-1.794 10.7-21.924 3.719 1.762-10.602 21.956z"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
fillRule="evenodd"
|
||||
d="M116.513 98.544l2.054-3.715 29.947 14.54 9.746-19.87 1.099.558 1.578-3.127 3.114 1.622a3.047 3.047 0 004.147-1.37l12.149-24.984a3.047 3.047 0 00-1.696-4.194L130.78 40.547a3.045 3.045 0 00-3.773 1.511l-2.494 5.038-8.631-4.113-14.292 29.25-1.014-.499-7.542 15.34 1.553.759 8.093 3.953 13.833 6.758zm13.929-11.386l-3.817-1.794 10.7-21.924 3.719 1.762-10.602 21.956z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path fill="#fff" d="M81.967 156.227h-8.194v.481h8.194v-.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M81.967 156.227v-.401h1.664v.401h-1.664zm0 0h-8.194v.481h8.194v-.481zm0 8.374v-.38h1.664v.38h-1.664z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M73.773 156.698c0 2.028.862 3.972 2.397 5.406 1.534 1.434 3.615 2.239 5.785 2.239"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M89.906 85.806l3.691-7.315-.429-.216-3.692 7.315.43.216z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M89.906 85.806l.357.181-.75 1.485-.357-.18.75-1.486zm0 0l3.691-7.315-.429-.216-3.692 7.315.43.216zm-7.477-3.773l.34.172-.75 1.485-.34-.172.75-1.485z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M93.177 78.279c-1.81-.914-3.935-1.02-5.906-.296-1.971.724-3.628 2.219-4.606 4.156"
|
||||
></path>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M95.055 88.192l3.596-7.362.435.212-3.596 7.363-.435-.213z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M95.055 88.192l-.363-.177-.73 1.495.362.177.73-1.495zm0 0l3.596-7.362.435.212-3.596 7.363-.435-.213zm7.577 3.701l-.345-.168-.73 1.494.344.169.731-1.495z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.078 81.038c1.835.896 3.216 2.53 3.839 4.542.624 2.012.439 4.238-.513 6.188"
|
||||
></path>
|
||||
<path fill="#fff" d="M99.854 156.227h8.194v.481h-8.194v-.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.854 156.227v-.401H98.19v.401h1.663zm0 0h8.194v.481h-8.194v-.481zm0 8.374v-.38H98.19v.38h1.663z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M108.048 156.698c0 2.028-.862 3.972-2.397 5.406-1.534 1.434-3.615 2.239-5.785 2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M81.967 196.625h-8.194v-.481h8.194v.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M81.967 196.625v.401h1.664v-.401h-1.664zm0 0h-8.194v-.481h8.194v.481zm0-8.375v.381h1.664v-.381h-1.664z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M73.773 196.154c0-2.028.862-3.973 2.397-5.406 1.534-1.434 3.615-2.24 5.785-2.24"
|
||||
></path>
|
||||
<path fill="#fff" d="M99.854 196.624h8.194v-.48h-8.194v.48z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.854 196.624v.401H98.19v-.401h1.663zm0 0h8.194v-.48h-8.194v.48zm0-8.374v.38H98.19v-.38h1.663z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M108.048 196.153c0-2.028-.862-3.972-2.397-5.406-1.534-1.434-3.615-2.239-5.785-2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M81.967 234.688h-8.194v.481h8.194v-.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M81.967 234.688v-.401h1.664v.401h-1.664zm0 0h-8.194v.481h8.194v-.481zm0 8.375v-.381h1.664v.381h-1.664z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M73.773 235.159c0 2.028.862 3.972 2.397 5.406 1.534 1.434 3.615 2.239 5.785 2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M99.854 234.688h8.194v.481h-8.194v-.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.854 234.688v-.401H98.19v.401h1.663zm0 0h8.194v.481h-8.194v-.481zm0 8.375v-.381H98.19v.381h1.663z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M108.048 235.159c0 2.028-.862 3.972-2.397 5.406-1.534 1.434-3.615 2.239-5.785 2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M81.967 275.265h-8.194v-.481h8.194v.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M81.967 275.265v.401h1.664v-.401h-1.664zm0 0h-8.194v-.481h8.194v.481zm0-8.375v.381h1.664v-.381h-1.664z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M73.773 274.794c0-2.028.862-3.972 2.397-5.406 1.534-1.434 3.615-2.239 5.785-2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M99.854 275.265h8.194v-.481h-8.194v.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.854 275.265v.401H98.19v-.401h1.663zm0 0h8.194v-.481h-8.194v.481zm0-8.375v.381H98.19v-.381h1.663z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M108.048 274.794c0-2.028-.862-3.972-2.397-5.406-1.534-1.434-3.615-2.239-5.785-2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M99.854 324.66h8.194v-.481h-8.194v.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.854 324.66v.401H98.19v-.401h1.663zm0 0h8.194v-.481h-8.194v.481zm0-8.375v.381H98.19v-.381h1.663z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M108.048 324.189c0-2.028-.862-3.972-2.397-5.406-1.534-1.434-3.615-2.239-5.785-2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M99.854 374.188h8.194v-.481h-8.194v.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.854 374.188v.4H98.19v-.4h1.663zm0 0h8.194v-.481h-8.194v.481zm0-8.375v.38H98.19v-.38h1.663z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M108.048 373.716c0-2.027-.862-3.972-2.397-5.406-1.534-1.433-3.615-2.239-5.785-2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M99.854 445.343h8.194v-.48h-8.194v.48z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.854 445.343v.401H98.19v-.401h1.663zm0 0h8.194v-.48h-8.194v.48zm0-8.374v.38H98.19v-.38h1.663z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M108.048 444.872c0-2.028-.862-3.972-2.397-5.406-1.534-1.434-3.615-2.239-5.785-2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M81.891 119.494h-8.194v-.495h8.194v.495z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M81.891 119.494v.413h1.664v-.413H81.89zm0 0h-8.194v-.495h8.194v.495zm0-8.63v.392h1.664v-.392H81.89z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M73.697 119.009c0-2.09.862-4.094 2.397-5.571a8.348 8.348 0 015.785-2.308"
|
||||
></path>
|
||||
<path fill="#fff" d="M99.854 454.011h8.194v.481h-8.194v-.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M99.854 454.011v-.4H98.19v.4h1.663zm0 0h8.194v.481h-8.194v-.481zm0 8.375v-.381H98.19v.381h1.663z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M108.048 454.483c0 2.027-.862 3.972-2.397 5.406-1.534 1.433-3.615 2.239-5.785 2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M81.967 410.098h-8.194v-.481h8.194v.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M81.967 410.098v.401h1.664v-.401h-1.664zm0 0h-8.194v-.481h8.194v.481zm0-8.375v.381h1.664v-.381h-1.664z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M73.773 409.626c0-2.027.862-3.972 2.397-5.405 1.534-1.434 3.615-2.24 5.785-2.24"
|
||||
></path>
|
||||
<path fill="#fff" d="M81.967 466.447h-8.194v.481h8.194v-.481z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M81.967 466.447v-.401h1.664v.401h-1.664zm0 0h-8.194v.481h8.194v-.481zm0 8.375v-.381h1.664v.381h-1.664z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M73.773 466.918c0 2.028.862 3.972 2.397 5.406 1.534 1.434 3.615 2.239 5.785 2.239"
|
||||
></path>
|
||||
<path fill="#fff" d="M92.31 510.661v8.193h-.48v-8.193h.48z"></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M92.31 510.661h.4v-1.664h-.4v1.664zm0 0v8.193h-.48v-8.193h.48zm-8.375 0h.381v-1.664h-.38v1.664z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#0D1922"
|
||||
strokeDasharray="0.76 0.76"
|
||||
strokeOpacity="0.7"
|
||||
strokeWidth="0.152"
|
||||
d="M91.84 518.854c-2.028 0-3.972-.862-5.406-2.396-1.434-1.534-2.24-3.616-2.24-5.786"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
d="M168.185 381.035l2.892 2.913-21.397 21.255-2.823-2.912 21.328-21.256zM72.59 59.134l-3.817-1.795 10.7-21.923 3.72 1.762L72.59 59.134zM130.441 87.385l-3.817-1.794 10.701-21.924 3.719 1.762-10.603 21.956zM112.821 464.975v-1.6h22.012v1.6h-22.012z"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
fillRule="evenodd"
|
||||
d="M130.441 87.385l-3.817-1.794 10.701-21.924 3.719 1.762-10.603 21.956zM8.896 128.318h15.77v-4.137h.511v57.327H78.7v-4.95h3.269v-11.974h1.715v23.743h-1.715v-1.771h-3.27v-3.392H23.145v31.647h3.42v-1.282h32.434v1.294h17.626v-6.998h5.344v-10.96h1.715v37.612h-1.715v-11.111h-5.344v-7.087H58.998v1.418H26.565v-1.441h-3.421v32.28h55.6v-3.849h3.224v-1.684h1.715v23.738H81.97v-11.753h-3.228v-4.922H25.107v56.599h31.059v-3.97h12.792v-24.796H81.97v-2.188h1.712v59.549H71.829v-1.366h6.923v-21.439H55.127v21.439h6.924v1.366H47.08v-1.366h6.57v-21.439H30.767v21.439h6.505v1.366H22.119v-1.366h7.105v-21.439H5.543v21.439h6.838v1.366H.777v-28.595h23.801v-3.248H8.865V253.26h15.713v-3.194h-1.865v.391H9.932l-.366-.366v-.437h.366v-.836h-.366v-.497l.366-.367h12.781v-2.857H4.4v-58.929h18.314v-2.705H9.865l-.3-.299v-.421h.3v-.825h-.3v-.41l.367-.367h12.781v.367h1.968v-3.251H8.896v-49.939zm17.45-3.255V93.907h48.619l8.718 4.28v12.621h-4.067v-10.182l-3.773-1.854H37.848v21.21h45.835v35.844h-1.721v-2.145H68.899v-24.648H56.089v-3.97H26.345zm42.612 181.602v-3.248h-11.86v3.248h11.86zm1.11-28.086h12.434v28.086H70.07v-28.086zm-45.49-24.542H9.665v48.621h14.913v-48.621zm-19.337-9.696v-28.085h17.472v28.085H5.241zm0-57.193v27.663h17.472v-27.663H5.241zm77.16 21.397h-5.007v14.009H82.4v-14.009zm0 36.744v3.247h-2.888v-3.247h2.888zm0 8.938v-4.161h-2.888v4.161h2.888zm-3.004-71.063h3.004v2.6h-3.004v-2.6zm3.004-5.768h-3.004v4.112h3.004v-4.112zm-12.344-24.603h12.42v-27.73h-12.42v27.73zm-1.157-27.73v3.285H57.142v-3.285H68.9zm-44.235 3.781h-15v48.618h15v-48.618zm6.618-8.862h4.998v-21.21h-4.998v21.21zM83.683 358.039H47.08v1.551h6.556v21.455H30.875V359.59h6.397v-1.551H22.119v1.551h7.105v21.455H5.543V359.59h6.838v-1.551H.777v28.536h22.017v3.216H4.432v44.71h18.362v2.716H7.168l-.423.422v.48h.211v.818h-.21c.004.151.01.455 0 .465-.011.011.277.287.422.423h15.626V489.78H7.168l-.423.422v.404h.233v.688h-.233v.465l.423.422h15.626v2.914H4.376v43.644h18.418v7.067H59.964v24.123h3.128V588h28.241v-18.071h2.706v15.285l.299.299h.512v-.299h.656v.299h.356l.498-.498v-15.351h-.374v-60.662H92.83v1.499h1.573v59.163H60.3v-24.23h-6.509v-4.153h-30.56v-49.645h55.47v4.88h3.269v13.985h1.712V475.05H81.97v10.23H78.7v4.943H23.232v-49.586H55.48v-1.312h19.923v24.809h6.569v1.9h1.712v-55.281H81.97v1.948h-6.569v24.953H55.48v-1.238H23.232v-49.841h55.52v4.94h3.219v10.046h1.712v-43.522zm-60.89 180.028H5.224v-42.264h17.57v42.264zm67.944 49.189v-17.327h-26.77v17.327h26.77zM82.4 439.325h-5.78v23.583h5.78v-23.583zm0-25.42v23.749h-5.78v-23.749h5.78zm0 72.176h-2.853v4.142H82.4v-4.142zm-2.853 5.555H82.4v4.142h-2.853v-4.142zM22.794 390.837v42.734H5.237v-42.734h17.557zm32.403-31.247h23.555v21.455H55.197V359.59zm24.316 31.227h2.888v-4.242h-2.888v4.242z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
d="M47.799 108.704v1.463h21.934v-1.463H47.799zM4.432 486.775h18.362v-.679H5.237v-42.643h17.557v-.768H4.432v44.09zM25.177 125.063h1.168v-.441h-1.168v.441zM9.389 358.039V335.26h-.297v22.779h.297zM74.965 93.907l5.26-11.04-.324-.157-5.35 11.197h.414z"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
fillRule="evenodd"
|
||||
d="M80.224 82.868l1.33.647.737-1.461-14.086-6.881 1.864-3.54L40.1 56.928l9.64-19.954-1-.447 1.42-3.102-.61-.314-2.87-1.478a3.046 3.046 0 01-1.347-4.038L57.409 2.69a3.046 3.046 0 014.348-1.259l43.219 26.842a3.046 3.046 0 011.08 4.023l-2.415 4.522-.283.53 8.882 4.215-14.29 29.104 1.191.656-7.333 15.38-1.424-.695c-.259.474-.769 1.425-.739 1.44l4.214 2.048.727-1.435-1.552-.758 7.541-15.34 1.014.499 14.292-29.25 8.632 4.112.299-.604 2.194-4.434a3.047 3.047 0 013.774-1.51l47.87 17.456a3.046 3.046 0 011.696 4.194L168.197 87.41a3.046 3.046 0 01-4.147 1.37l-2.911-1.517-.202-.105-1.579 3.127-.224-.114-.874-.444-9.746 19.87-29.947-14.54-2.054 3.715-13.834-6.758-.718 1.42 3.34 1.623-7.098 14.377v46.409h1.457v-2.217h13.028v-24.572h12.878v-4.01h30.942v56.435h-53.472v-4.925H99.66v-11.765h-1.457v23.433h1.457v-1.63h3.376v-3.477h55.638v30.461h-40.607v1.343h-13.226v-7.081h-5.18v-10.526h-1.458v36.763h1.457v-10.793h5.181v-6.943h13.226v1.402h40.607v30.829h-55.555v-4.007H99.66v-1.541h-1.457v23.667h1.457v-11.664h3.459v-4.991h53.374v56.636h-30.959v-3.96h-12.765v-24.803H99.66v-2.101h-1.457v40.259h1.42v-1.525h3.385v-4.88h15.054v1.244h40.647v30.691h-53.775v-5.637h-5.311v-10.799h-1.42v40.496h1.42v-1.157h5.311v-18.712h2.615v-2.516h45.959v21.934l18.181 18.141 4.054-3.996 18.187 18.114-29.46 29.196-5.587-5.293-3.971 4.068-49.506-49.457h-5.784v-1.324h-1.42v62.152h1.42v-14.41h14.852v8.921h5.539v-4.657h24.753v21.175h-24.753v-5.637h-5.539v5.637H99.622v-1.961h-1.42v7.598h46.564v21.109h-41.787v-11.928h-4.776v31.519h52.062v-71.049l8.757 8.75 1.322 1.321 5.267-5.074 29.87-29.914.254.26 9.095-9.261v-.531l-.275-.275-.366.275-.569-.587.294-.37-.294-.254-.699.254-8.795 9.122-6.095-6.136 11.123-11.137-13.272-13.25a29.698 29.698 0 01-8.717-21.019v-31.17H159.04v-4.149h15.595l.42-.42v-.341h-.42v-.833h.42v-.43l-.42-.42H159.04v-.863h-2.053v-7.719h20.178v-39.921h-20.2v-8.996h2.075v.342h15.595l.42-.42v-.341h-.42v-.833h.42v-.429l-.42-.421H159.04v-2.887h18.125v-58.853H159.03v-2.654h15.605l.42-.42v-.333h-.42v-.834h.42v-.472l-.42-.42H159.03v.42h-2.066v-8.927h20.201v-39.806h-20.201v-7.702h1.961v-4.342h-11.308v-5.496l13.437-27.028c.155.087 1.007.554 2.279 1.25a4.188 4.188 0 005.781-1.858l12.043-25.006a3.807 3.807 0 00-2.143-5.236l-48.005-17.244A3.807 3.807 0 00126.298 42l-2.209 4.54-8.683-4.176 4.135-8.373v-.558l-.538-.29-.33.29-.455-.29.103-.434-.289-.165-.74.304-4.137 8.486-8.68-3.987c.066-.114 1.057-2.158 2.353-4.839a3.808 3.808 0 00-1.407-4.883L62.226.581a3.808 3.808 0 00-5.451 1.575L44.628 27.374a3.808 3.808 0 001.701 5.045l2.957 1.508L35.911 61.3 79.9 82.71l.323.157zm19.436 39.309v-12.376l7.046-14.063 39.205 19.053v5.91h-27.745v1.476H99.66zm-.219 30.702h12.14v-29.155h-12.14v29.155zm13.247-29.155v4.646h11.938v-3.327h-6.46v-1.319h-5.478zm44.276 9.641h19.593v38.28h-19.593v-38.28zm19.593 53.652H159.03v27.901h17.527v-27.901zM159.03 216.29h17.527v28.145H159.03V216.29zm-54.828 6.211h-4.76v-13.867h4.76v13.867zm-4.76-36.75v-2.637h2.95v2.637h-2.95zm0-8.388v4.115h2.95v-4.115h-2.95zm0 71.206h2.875v-3.198h-2.876v3.198zm2.875 5.671h-2.876v-4.207h2.876v4.207zm9.264 53.79v-29.386h-12.14v29.386h12.14zm64.824-48.235v38.447h-19.418v-38.447h19.418zm-58.343 48.235h-5.293v-4.553h11.776v3.192h-6.483v1.361zm-15.781 1.629h-2.84v4.116h2.84v-4.116zm74.134 31.935V315.02H159.04v26.574h17.375zm9.484 25.946l12.146 12.024-10.675 10.643-11.627-11.506-4.054 4.032-17.483-17.53v-21.934h22.209v1.54a31.983 31.983 0 009.484 22.731zm-82.025 9.224h-4.251v5.587h9.842l-5.591-5.587zm-4.251 7.184h11.44l36.819 36.791h-48.26v-36.791zm.067 108.68v-12.137h49.037v12.137H99.69zm4.058-129.077h-4.307v-26.917h4.307v26.917zM39.466 58.089l-1.432 2.927 28.982 13.998 1.368-2.927-28.918-13.998zm79.524 38.815l-1.401 2.696 28.994 14.217 1.47-3.047-29.063-13.866zm-14.056 247.912v-1.547h1.8v1.547h-1.8z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="#81878C"
|
||||
d="M50.16 33.425l8.384-17.776 44.814 21.698.283-.53L58.345 14.68l-8.794 18.43.609.314zM159.358 90.284l1.579-3.127.202.105 8.881-18.253-45.208-22.29-.299.604 44.588 22.102-9.967 20.745.224.114z"
|
||||
></path>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WestWingTopLevelsLayout;
|
||||
@@ -0,0 +1,425 @@
|
||||
const FloorNumbers = () => {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={745.34}
|
||||
x={691.44}
|
||||
width="24"
|
||||
height="14"
|
||||
viewBox="0 0 24 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M8.5 11.11C7.15 11.11 6.31 10.57 5.88 9.92L6.85 9.19C7.23 9.75 7.74 10.03 8.47 10.03C9.39 10.03 9.9 9.57 9.9 8.9C9.9 8.22 9.36 7.76 8.51 7.76H7.66V6.73H8.5C9.28 6.73 9.76 6.3 9.76 5.68C9.76 5.06 9.3 4.63 8.47 4.63C7.78 4.63 7.31 4.92 6.98 5.39L6.06 4.66C6.53 4.02 7.3 3.55 8.51 3.55C10.19 3.55 11.14 4.41 11.14 5.56C11.14 6.33 10.71 6.9 10 7.18V7.2C10.84 7.52 11.29 8.14 11.29 8.97C11.29 10.2 10.27 11.11 8.5 11.11ZM12.906 11V9.9H14.646V5.1C14.096 5.45 13.496 5.67 12.906 5.83V4.69C13.716 4.45 14.396 4.12 14.946 3.66H16.036V9.9H17.756V11H12.906Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={764.34}
|
||||
x={691.44}
|
||||
width="24"
|
||||
height="14"
|
||||
viewBox="0 0 24 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M8.5 11.11C7.15 11.11 6.31 10.57 5.88 9.92L6.85 9.19C7.23 9.75 7.74 10.03 8.47 10.03C9.39 10.03 9.9 9.57 9.9 8.9C9.9 8.22 9.36 7.76 8.51 7.76H7.66V6.73H8.5C9.28 6.73 9.76 6.3 9.76 5.68C9.76 5.06 9.3 4.63 8.47 4.63C7.78 4.63 7.31 4.92 6.98 5.39L6.06 4.66C6.53 4.02 7.3 3.55 8.51 3.55C10.19 3.55 11.14 4.41 11.14 5.56C11.14 6.33 10.71 6.9 10 7.18V7.2C10.84 7.52 11.29 8.14 11.29 8.97C11.29 10.2 10.27 11.11 8.5 11.11ZM15.126 11.11C12.826 11.11 12.336 9.28 12.336 7.34C12.336 5.41 12.816 3.55 15.116 3.55C17.426 3.55 17.916 5.38 17.916 7.32C17.916 9.25 17.436 11.11 15.126 11.11ZM15.126 10.03C16.396 10.03 16.526 8.64 16.526 7.33C16.526 6.02 16.396 4.63 15.126 4.63C13.846 4.63 13.726 6.02 13.726 7.33C13.726 8.64 13.846 10.03 15.126 10.03Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={783.34}
|
||||
x={691.44}
|
||||
width="24"
|
||||
height="14"
|
||||
viewBox="0 0 24 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM12.736 10.76L13.176 9.7C13.486 9.87 13.936 10.03 14.456 10.03C15.896 10.03 16.436 8.92 16.506 7.44H16.486C16.046 8.02 15.276 8.26 14.606 8.26C13.256 8.26 12.306 7.34 12.306 5.97C12.306 4.55 13.336 3.55 15.016 3.55C17.236 3.55 17.856 5.33 17.856 7.07C17.856 9.02 17.096 11.11 14.426 11.11C13.696 11.11 13.146 10.96 12.736 10.76ZM14.976 7.21C15.646 7.21 16.346 6.86 16.346 6.02C16.346 5.36 15.916 4.62 14.966 4.62C14.166 4.62 13.676 5.14 13.676 5.92C13.676 6.67 14.136 7.21 14.976 7.21Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={802.34}
|
||||
x={691.44}
|
||||
width="24"
|
||||
height="14"
|
||||
viewBox="0 0 24 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM15.116 11.11C13.336 11.11 12.326 10.24 12.326 9.01C12.326 8.17 12.796 7.58 13.646 7.24V7.22C12.926 6.92 12.486 6.32 12.486 5.55C12.486 4.4 13.456 3.55 15.116 3.55C16.786 3.55 17.756 4.4 17.756 5.55C17.756 6.32 17.306 6.89 16.586 7.18V7.2C17.426 7.55 17.916 8.17 17.916 9.01C17.916 10.24 16.886 11.11 15.116 11.11ZM15.116 6.78C15.866 6.78 16.386 6.31 16.386 5.68C16.386 5.07 15.926 4.62 15.116 4.62C14.316 4.62 13.856 5.07 13.856 5.68C13.856 6.31 14.376 6.78 15.116 6.78ZM15.116 7.72C14.286 7.72 13.716 8.21 13.716 8.91C13.716 9.57 14.226 10.04 15.116 10.04C16.016 10.04 16.526 9.57 16.526 8.9C16.526 8.21 15.956 7.72 15.116 7.72Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
width="24"
|
||||
height="14"
|
||||
viewBox="0 0 24 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
y={821.34}
|
||||
x={691.44}
|
||||
>
|
||||
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM13.646 11L16.276 4.76H12.506V3.66H17.776V4.39L15.056 11H13.646Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={840.34}
|
||||
x={691.44}
|
||||
width="24"
|
||||
height="14"
|
||||
viewBox="0 0 24 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM17.596 3.96L17.136 4.97C16.746 4.75 16.316 4.63 15.836 4.63C14.426 4.63 13.826 5.65 13.756 7.14H13.776C14.196 6.63 14.906 6.35 15.656 6.35C17.106 6.35 18.016 7.35 18.016 8.68C18.016 10.09 17.006 11.11 15.276 11.11C13.046 11.11 12.386 9.39 12.386 7.6C12.386 5.59 13.216 3.55 15.826 3.55C16.596 3.55 17.156 3.73 17.596 3.96ZM15.306 10.04C16.146 10.04 16.636 9.49 16.636 8.72C16.636 7.97 16.176 7.38 15.286 7.38C14.536 7.38 13.896 7.81 13.896 8.61C13.896 9.23 14.286 10.04 15.306 10.04Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={859.34}
|
||||
x={691.44}
|
||||
width="24"
|
||||
height="14"
|
||||
viewBox="0 0 24 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM14.336 4.76L14.206 6.55C14.486 6.43 14.836 6.34 15.266 6.34C16.706 6.34 17.746 7.25 17.746 8.67C17.746 10.09 16.716 11.11 14.876 11.11C13.636 11.11 12.856 10.65 12.406 10.09L13.306 9.27C13.696 9.75 14.196 10.03 14.886 10.03C15.806 10.03 16.356 9.51 16.356 8.69C16.356 7.88 15.776 7.33 14.836 7.33C14.386 7.33 14.066 7.46 13.796 7.62H12.776L13.086 3.66H17.336V4.76H14.336Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={878.34}
|
||||
x={691.44}
|
||||
width="24"
|
||||
height="14"
|
||||
viewBox="0 0 24 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM18.1191 8.38V9.41H16.8691V11H15.4891V9.41H11.9491V8.55L15.3691 3.66H16.8691V8.38H18.1191ZM13.3291 8.38H15.4891V5.32H15.4691L13.3291 8.38Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={921.34}
|
||||
x={642.44}
|
||||
width="73"
|
||||
height="18"
|
||||
viewBox="0 0 73 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="73" height="18" rx="9" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M11.25 13.11C9.93 13.11 8.94 12.71 8.2 11.97L9.05 11.05C9.61 11.64 10.39 11.98 11.26 11.98C12.33 11.98 12.81 11.56 12.81 10.91C12.81 10.2 12.14 10.01 10.99 9.74C9.71 9.43 8.47 8.99 8.47 7.5C8.47 6.17 9.49 5.21 11.31 5.21C12.5 5.21 13.41 5.6 14.1 6.28L13.31 7.21C12.78 6.67 12.11 6.34 11.29 6.34C10.36 6.34 9.9 6.78 9.9 7.36C9.9 8.06 10.54 8.21 11.67 8.49C13.02 8.83 14.23 9.25 14.23 10.77C14.23 12.15 13.17 13.11 11.25 13.11ZM18.4639 13L17.0839 10.7H16.5539V13H15.2039V5.32H16.5539V9.72H17.0939L18.3939 7.63H19.9539L18.2339 10.2L20.0439 13H18.4639ZM24.3887 7.63H25.7587L23.5687 13.36C23.1487 14.46 22.6487 14.94 21.6587 14.94C21.3387 14.94 21.0987 14.89 20.9187 14.83V13.85C21.0487 13.88 21.1987 13.91 21.3887 13.91C21.8687 13.91 22.1487 13.73 22.3387 13.13L20.2387 7.63H21.6687L23.0187 11.6H23.0387L24.3887 7.63ZM32.5427 8.86H35.6627V13H34.3927L34.3727 12.09H34.3527C33.9727 12.66 33.2527 13.11 32.1827 13.11C29.9727 13.11 28.7427 11.39 28.7427 9.22C28.7427 6.98 30.0627 5.21 32.4927 5.21C33.8727 5.21 34.9127 5.8 35.5727 6.78L34.5127 7.5C34.0627 6.77 33.4227 6.35 32.5227 6.35C31.0027 6.35 30.1927 7.57 30.1927 9.19C30.1927 10.84 30.9727 11.98 32.4427 11.98C33.5527 11.98 34.3027 11.32 34.3027 10.19V9.98H32.5427V8.86ZM41.3213 13H40.0513L40.0213 12.24H40.0013C39.6913 12.78 39.1613 13.11 38.4313 13.11C37.4013 13.11 36.7213 12.43 36.7213 11.48C36.7213 10.82 37.0413 10.32 37.7413 10.08C38.2913 9.89 39.1313 9.84 39.9813 9.81V9.41C39.9813 8.92 39.6413 8.56 39.0113 8.56C38.4313 8.56 38.0913 8.85 37.9313 9.27L36.8913 8.76C37.2513 7.94 37.9813 7.52 39.0713 7.52C40.5213 7.52 41.3213 8.23 41.3213 9.41V13ZM38.8613 12.1C39.5413 12.1 39.9813 11.59 39.9813 10.96V10.67C39.6613 10.69 39.2113 10.72 38.8512 10.77C38.4213 10.83 38.0613 10.98 38.0613 11.42C38.0613 11.81 38.3513 12.1 38.8613 12.1ZM42.7039 13V7.63H43.9739L44.0039 8.46H44.0239C44.3539 7.84 44.8239 7.52 45.3739 7.52C45.5639 7.52 45.7239 7.56 45.8639 7.61V8.79C45.7539 8.76 45.5539 8.73 45.3539 8.73C44.5039 8.73 44.0539 9.29 44.0539 9.92V13H42.7039ZM48.6773 13.11C47.2373 13.11 46.3773 11.89 46.3773 10.36C46.3773 8.76 47.2873 7.52 48.7273 7.52C49.4073 7.52 49.9773 7.81 50.3773 8.33H50.3973V5.32H51.7473V13H50.4773L50.4473 12.19H50.4273C50.0173 12.78 49.3873 13.11 48.6773 13.11ZM49.0673 12.05C49.9573 12.05 50.4373 11.31 50.4373 10.31C50.4373 9.27 49.9573 8.58 49.0873 8.58C48.1773 8.58 47.7473 9.38 47.7473 10.33C47.7473 11.23 48.1673 12.05 49.0673 12.05ZM54.1734 9.84H56.6034C56.5434 9.08 56.2134 8.55 55.4234 8.55C54.6434 8.55 54.2534 9.07 54.1734 9.84ZM56.8934 11.43L57.7534 12.19C57.2734 12.76 56.5834 13.11 55.5734 13.11C53.7534 13.11 52.7934 11.99 52.7934 10.32C52.7934 8.7 53.7434 7.52 55.4334 7.52C57.1034 7.52 57.9434 8.67 57.9434 10.15C57.9434 10.35 57.9334 10.6 57.9034 10.75H54.1734C54.2734 11.57 54.7134 12.08 55.6034 12.08C56.1234 12.08 56.5634 11.87 56.8934 11.43ZM58.993 13V7.63H60.263L60.293 8.39H60.313C60.643 7.85 61.223 7.52 61.953 7.52C63.083 7.52 63.813 8.26 63.813 9.37V13H62.463V9.57C62.463 9.02 62.133 8.58 61.503 8.58C60.783 8.58 60.343 9.09 60.343 9.77V13H58.993Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={969.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.63 11V10.05L9.22 7.51C9.86 6.88 10.24 6.32 10.24 5.72C10.24 5.09 9.83 4.64 9.02 4.64C8.32 4.64 7.9 4.98 7.5 5.51L6.57 4.79C7.15 4.01 7.95 3.55 9.12 3.55C10.7 3.55 11.63 4.42 11.63 5.66C11.63 6.42 11.29 7.14 10.41 8L8.47 9.88V9.9H11.77V11H6.63ZM13.406 11V9.9H15.146V5.1C14.596 5.45 13.996 5.67 13.406 5.83V4.69C14.216 4.45 14.896 4.12 15.446 3.66H16.536V9.9H18.256V11H13.406Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={990.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.63 11V10.05L9.22 7.51C9.86 6.88 10.24 6.32 10.24 5.72C10.24 5.09 9.83 4.64 9.02 4.64C8.32 4.64 7.9 4.98 7.5 5.51L6.57 4.79C7.15 4.01 7.95 3.55 9.12 3.55C10.7 3.55 11.63 4.42 11.63 5.66C11.63 6.42 11.29 7.14 10.41 8L8.47 9.88V9.9H11.77V11H6.63ZM15.626 11.11C13.326 11.11 12.836 9.28 12.836 7.34C12.836 5.41 13.316 3.55 15.616 3.55C17.926 3.55 18.416 5.38 18.416 7.32C18.416 9.25 17.936 11.11 15.626 11.11ZM15.626 10.03C16.896 10.03 17.026 8.64 17.026 7.33C17.026 6.02 16.896 4.63 15.626 4.63C14.346 4.63 14.226 6.02 14.226 7.33C14.226 8.64 14.346 10.03 15.626 10.03Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1009.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM13.236 10.76L13.676 9.7C13.986 9.87 14.436 10.03 14.956 10.03C16.396 10.03 16.936 8.92 17.006 7.44H16.986C16.546 8.02 15.776 8.26 15.106 8.26C13.756 8.26 12.806 7.34 12.806 5.97C12.806 4.55 13.836 3.55 15.516 3.55C17.736 3.55 18.356 5.33 18.356 7.07C18.356 9.02 17.596 11.11 14.926 11.11C14.196 11.11 13.646 10.96 13.236 10.76ZM15.476 7.21C16.146 7.21 16.846 6.86 16.846 6.02C16.846 5.36 16.416 4.62 15.466 4.62C14.666 4.62 14.176 5.14 14.176 5.92C14.176 6.67 14.636 7.21 15.476 7.21Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1028.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM15.616 11.11C13.836 11.11 12.826 10.24 12.826 9.01C12.826 8.17 13.296 7.58 14.146 7.24V7.22C13.426 6.92 12.986 6.32 12.986 5.55C12.986 4.4 13.956 3.55 15.616 3.55C17.286 3.55 18.256 4.4 18.256 5.55C18.256 6.32 17.806 6.89 17.086 7.18V7.2C17.926 7.55 18.416 8.17 18.416 9.01C18.416 10.24 17.386 11.11 15.616 11.11ZM15.616 6.78C16.366 6.78 16.886 6.31 16.886 5.68C16.886 5.07 16.426 4.62 15.616 4.62C14.816 4.62 14.356 5.07 14.356 5.68C14.356 6.31 14.876 6.78 15.616 6.78ZM15.616 7.72C14.786 7.72 14.216 8.21 14.216 8.91C14.216 9.57 14.726 10.04 15.616 10.04C16.516 10.04 17.026 9.57 17.026 8.9C17.026 8.21 16.456 7.72 15.616 7.72Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1047.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM13.3648 11L15.9948 4.76H12.2248V3.66H17.4948V4.39L14.7748 11H13.3648Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1066.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM18.096 3.96L17.636 4.97C17.246 4.75 16.816 4.63 16.336 4.63C14.926 4.63 14.326 5.65 14.256 7.14H14.276C14.696 6.63 15.406 6.35 16.156 6.35C17.606 6.35 18.516 7.35 18.516 8.68C18.516 10.09 17.506 11.11 15.776 11.11C13.546 11.11 12.886 9.39 12.886 7.6C12.886 5.59 13.716 3.55 16.326 3.55C17.096 3.55 17.656 3.73 18.096 3.96ZM15.806 10.04C16.646 10.04 17.136 9.49 17.136 8.72C17.136 7.97 16.676 7.38 15.786 7.38C15.036 7.38 14.396 7.81 14.396 8.61C14.396 9.23 14.786 10.04 15.806 10.04Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1085.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM14.7579 4.76L14.6279 6.55C14.9079 6.43 15.2579 6.34 15.6879 6.34C17.1279 6.34 18.1679 7.25 18.1679 8.67C18.1679 10.09 17.1379 11.11 15.2979 11.11C14.0579 11.11 13.2779 10.65 12.8279 10.09L13.7279 9.27C14.1179 9.75 14.6179 10.03 15.3079 10.03C16.2279 10.03 16.7779 9.51 16.7779 8.69C16.7779 7.88 16.1979 7.33 15.2579 7.33C14.8079 7.33 14.4879 7.46 14.2179 7.62H13.1979L13.5079 3.66H17.7579V4.76H14.7579Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1104.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM18.746 8.38V9.41H17.496V11H16.116V9.41H12.576V8.55L15.996 3.66H17.496V8.38H18.746ZM13.956 8.38H16.116V5.32H16.096L13.956 8.38Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1123.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM15.3379 11.11C13.9879 11.11 13.1479 10.57 12.7179 9.92L13.6879 9.19C14.0679 9.75 14.5779 10.03 15.3079 10.03C16.2279 10.03 16.7379 9.57 16.7379 8.9C16.7379 8.22 16.1979 7.76 15.3479 7.76H14.4979V6.73H15.3379C16.1179 6.73 16.5979 6.3 16.5979 5.68C16.5979 5.06 16.1379 4.63 15.3079 4.63C14.6179 4.63 14.1479 4.92 13.8179 5.39L12.8979 4.66C13.3679 4.02 14.1379 3.55 15.3479 3.55C17.0279 3.55 17.9779 4.41 17.9779 5.56C17.9779 6.33 17.5479 6.9 16.8379 7.18V7.2C17.6779 7.52 18.1279 8.14 18.1279 8.97C18.1279 10.2 17.1079 11.11 15.3379 11.11Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1142.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM13.046 11V10.05L15.636 7.51C16.276 6.88 16.656 6.32 16.656 5.72C16.656 5.09 16.246 4.64 15.436 4.64C14.736 4.64 14.316 4.98 13.916 5.51L12.986 4.79C13.566 4.01 14.366 3.55 15.536 3.55C17.116 3.55 18.046 4.42 18.046 5.66C18.046 6.42 17.706 7.14 16.826 8L14.886 9.88V9.9H18.186V11H13.046Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1161.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM13.406 11V9.9H15.146V5.1C14.596 5.45 13.996 5.67 13.406 5.83V4.69C14.216 4.45 14.896 4.12 15.446 3.66H16.536V9.9H18.256V11H13.406Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1180.34}
|
||||
x={691.44}
|
||||
width="25"
|
||||
height="14"
|
||||
viewBox="0 0 25 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM15.626 11.11C13.326 11.11 12.836 9.28 12.836 7.34C12.836 5.41 13.316 3.55 15.616 3.55C17.926 3.55 18.416 5.38 18.416 7.32C18.416 9.25 17.936 11.11 15.626 11.11ZM15.626 10.03C16.896 10.03 17.026 8.64 17.026 7.33C17.026 6.02 16.896 4.63 15.626 4.63C14.346 4.63 14.226 6.02 14.226 7.33C14.226 8.64 14.346 10.03 15.626 10.03Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1199.34}
|
||||
x={694.44}
|
||||
width="19"
|
||||
height="14"
|
||||
viewBox="0 0 19 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M6.82 10.76L7.26 9.7C7.57 9.87 8.02 10.03 8.54 10.03C9.98 10.03 10.52 8.92 10.59 7.44H10.57C10.13 8.02 9.36 8.26 8.69 8.26C7.34 8.26 6.39 7.34 6.39 5.97C6.39 4.55 7.42 3.55 9.1 3.55C11.32 3.55 11.94 5.33 11.94 7.07C11.94 9.02 11.18 11.11 8.51 11.11C7.78 11.11 7.23 10.96 6.82 10.76ZM9.06 7.21C9.73 7.21 10.43 6.86 10.43 6.02C10.43 5.36 10 4.62 9.05 4.62C8.25 4.62 7.76 5.14 7.76 5.92C7.76 6.67 8.22 7.21 9.06 7.21Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1218.34}
|
||||
x={694.44}
|
||||
width="19"
|
||||
height="14"
|
||||
viewBox="0 0 19 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M9.2 11.11C7.42 11.11 6.41 10.24 6.41 9.01C6.41 8.17 6.88 7.58 7.73 7.24V7.22C7.01 6.92 6.57 6.32 6.57 5.55C6.57 4.4 7.54 3.55 9.2 3.55C10.87 3.55 11.84 4.4 11.84 5.55C11.84 6.32 11.39 6.89 10.67 7.18V7.2C11.51 7.55 12 8.17 12 9.01C12 10.24 10.97 11.11 9.2 11.11ZM9.2 6.78C9.95 6.78 10.47 6.31 10.47 5.68C10.47 5.07 10.01 4.62 9.2 4.62C8.4 4.62 7.94 5.07 7.94 5.68C7.94 6.31 8.46 6.78 9.2 6.78ZM9.2 7.72C8.37 7.72 7.8 8.21 7.8 8.91C7.8 9.57 8.31 10.04 9.2 10.04C10.1 10.04 10.61 9.57 10.61 8.9C10.61 8.21 10.04 7.72 9.2 7.72Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1237.34}
|
||||
x={694.44}
|
||||
width="19"
|
||||
height="14"
|
||||
viewBox="0 0 19 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M7.73 11L10.36 4.76H6.59V3.66H11.86V4.39L9.14 11H7.73Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1256.34}
|
||||
x={694.44}
|
||||
width="19"
|
||||
height="14"
|
||||
viewBox="0 0 19 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M11.68 3.96L11.22 4.97C10.83 4.75 10.4 4.63 9.92 4.63C8.51 4.63 7.91 5.65 7.84 7.14H7.86C8.28 6.63 8.99 6.35 9.74 6.35C11.19 6.35 12.1 7.35 12.1 8.68C12.1 10.09 11.09 11.11 9.36 11.11C7.13 11.11 6.47 9.39 6.47 7.6C6.47 5.59 7.3 3.55 9.91 3.55C10.68 3.55 11.24 3.73 11.68 3.96ZM9.39 10.04C10.23 10.04 10.72 9.49 10.72 8.72C10.72 7.97 10.26 7.38 9.37 7.38C8.62 7.38 7.98 7.81 7.98 8.61C7.98 9.23 8.37 10.04 9.39 10.04Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="sm:hidden block"
|
||||
y={1275.34}
|
||||
x={694.44}
|
||||
width="19"
|
||||
height="14"
|
||||
viewBox="0 0 19 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M8.42 4.76L8.29 6.55C8.57 6.43 8.92 6.34 9.35 6.34C10.79 6.34 11.83 7.25 11.83 8.67C11.83 10.09 10.8 11.11 8.96 11.11C7.72 11.11 6.94 10.65 6.49 10.09L7.39 9.27C7.78 9.75 8.28 10.03 8.97 10.03C9.89 10.03 10.44 9.51 10.44 8.69C10.44 7.88 9.86 7.33 8.92 7.33C8.47 7.33 8.15 7.46 7.88 7.62H6.86L7.17 3.66H11.42V4.76H8.42Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FloorNumbers;
|
||||
@@ -0,0 +1,686 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { MouseEvent } from "react";
|
||||
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
|
||||
|
||||
interface FloorsHighlightingProps {
|
||||
handleOnFloorClick: () => void;
|
||||
handleOnSkygardenClick: () => void;
|
||||
handleOnWingWrapperMouseEnter: (e: React.MouseEvent<SVGSVGElement>) => void;
|
||||
handleOnFloorMouseEnter:
|
||||
| ((
|
||||
e: React.MouseEvent<Element, MouseEvent<SVGSVGElement, MouseEvent>>
|
||||
) => void)
|
||||
| any;
|
||||
handleOnWingWrapperMouseLeave: () => void;
|
||||
currentFloor: IDesctiptionFloor | null;
|
||||
isFloorSidebar: boolean;
|
||||
isSkygardenSidebar: boolean;
|
||||
}
|
||||
|
||||
const FloorsHighlighting = ({
|
||||
handleOnFloorClick,
|
||||
handleOnFloorMouseEnter,
|
||||
handleOnSkygardenClick,
|
||||
handleOnWingWrapperMouseEnter,
|
||||
handleOnWingWrapperMouseLeave,
|
||||
currentFloor,
|
||||
isFloorSidebar,
|
||||
isSkygardenSidebar,
|
||||
}: FloorsHighlightingProps) => {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
y={706.34}
|
||||
x={710.44}
|
||||
width="553"
|
||||
height="656"
|
||||
viewBox="0 0 523 576"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
onMouseOut={handleOnWingWrapperMouseLeave}
|
||||
onMouseOver={handleOnWingWrapperMouseEnter}
|
||||
className="opacity-0 absolute z-0"
|
||||
>
|
||||
<path
|
||||
d="M0.253906 10.0946V22.0006L0.109375 539.099C0.109375 539.099 0.109375 539.1 0.109375 539.1V551.322C0.109375 552.187 0.665774 552.955 1.48824 553.223L70.702 575.837C71.082 575.961 71.4905 575.969 71.8747 575.859L230.111 530.46C230.225 530.427 230.342 530.405 230.46 530.393L259.554 527.442L261.352 527.18L263.26 527.348L292.683 528.701C292.809 528.707 292.933 528.725 293.055 528.754L417.341 558.35C417.524 558.393 417.699 558.462 417.862 558.554L429.584 565.18C429.961 565.393 430.396 565.478 430.825 565.422L500.998 556.319C501.994 556.19 502.74 555.341 502.74 554.336V542.015L502.885 21.2703V8.37711C502.885 7.30962 502.046 6.43029 500.98 6.37939L432.623 3.11615C432.462 3.10843 432.3 3.12035 432.141 3.15165L417.729 5.99316L293.016 17.3347H263.497C262.392 17.3347 261.496 18.2301 261.496 19.3346C261.496 18.2301 260.601 17.3346 259.496 17.3346H230.427L69.6847 0.0280938C69.5341 0.0118866 69.3822 0.0128247 69.2319 0.0308899L2.01527 8.10891C1.01023 8.22969 0.253906 9.08235 0.253906 10.0946Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
width="515"
|
||||
height="577"
|
||||
viewBox="0 0 515 577"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
// ref={leftWingRef}
|
||||
x={720}
|
||||
y={735}
|
||||
className={`absolute transition-opacity duration-300 ease-in-out top-0 left-0 w-full h-full z-10 opacity-100`}
|
||||
>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
data-id={"0"}
|
||||
className={`fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out ${
|
||||
currentFloor?.id === "0" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
}`}
|
||||
d="M2.77981 24.3169C1.60352 24.4326 0.583984 23.5085 0.583984 22.3265V10.4205C0.583984 9.40824 1.34031 8.55558 2.34534 8.43479L69.562 0.356775C69.7123 0.33871 69.8642 0.337772 70.0147 0.353979L230.757 17.6605H259.826C260.931 17.6605 261.826 18.5559 261.826 19.6605V31.2808C261.826 32.3853 260.931 33.2808 259.826 33.2808H230.757L71.9562 17.5499C71.8256 17.5369 71.6939 17.5369 71.5632 17.5497L2.77981 24.3169Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
data-id={"1"}
|
||||
className={`${
|
||||
currentFloor?.id === "1" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.41875 250.638C1.3818 250.552 0.583984 249.685 0.583984 248.644V233.569C0.583984 232.419 1.55249 231.505 2.70115 231.573L77.89 235.985L230.757 227.959L259.797 227.539C260.913 227.523 261.826 228.423 261.826 229.538V243.38C261.826 244.485 260.931 245.38 259.826 245.38H230.757L71.9115 256.376C71.8105 256.383 71.7091 256.382 71.6081 256.374L2.41875 250.638Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"2"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "2" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.75483 43.1604C1.58714 43.2606 0.583984 42.3397 0.583984 41.1678V29.253C0.583984 28.2327 1.35203 27.376 2.36628 27.2649L71.5533 19.6886C71.6906 19.6736 71.829 19.6728 71.9664 19.6863L230.757 35.2714H259.826C260.931 35.2714 261.826 36.1668 261.826 37.2714V48.8916C261.826 49.9962 260.931 50.8916 259.826 50.8916H230.757L71.9307 37.2589C71.8169 37.2491 71.7025 37.2491 71.5888 37.2589L2.75483 43.1604Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"3"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "3" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.71722 62.0904C1.56278 62.1675 0.583984 61.2519 0.583984 60.0949V48.1735C0.583984 47.1388 1.37318 46.2749 2.40366 46.1816L71.5887 39.9181C71.7025 39.9078 71.817 39.9072 71.9309 39.9165L230.757 52.8074H259.826C260.931 52.8074 261.826 53.7028 261.826 54.8074V66.4276C261.826 67.5322 260.931 68.4276 259.826 68.4276H230.757L71.7597 57.4808L2.71722 62.0904Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"4"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "4" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.69345 80.9654C1.54758 81.0282 0.583984 80.116 0.583984 78.9684V67.0435C0.583984 65.9997 1.3867 65.1315 2.42729 65.0497L71.6143 59.6125C71.7111 59.6049 71.8084 59.6043 71.9053 59.6109L230.757 70.3052H259.826C260.931 70.3052 261.826 71.2007 261.826 72.3052V83.9255C261.826 85.0301 260.931 85.9255 259.826 85.9255H230.757L71.7597 77.1793L2.69345 80.9654Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"5"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "5" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.65563 99.8093C1.5237 99.8499 0.583984 98.9432 0.583984 97.8106V85.8814C0.583984 84.8231 1.4085 83.9479 2.46496 83.8849L71.7597 79.7539L230.757 88.2076H259.826C260.931 88.2076 261.826 89.103 261.826 90.2076V101.828C261.826 102.932 260.931 103.828 259.826 103.828H230.757L71.7597 97.3321L2.65563 99.8093Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"6"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "6" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.63177 118.98C1.50881 119.007 0.583984 118.104 0.583984 116.981V105.05C0.583984 103.982 1.42242 103.103 2.48875 103.052L71.7597 99.7498L230.757 105.953H259.826C260.931 105.953 261.826 106.848 261.826 107.953V119.573C261.826 120.678 260.931 121.573 259.826 121.573H230.757L71.7597 117.328L2.63177 118.98Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"7"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "7" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.59384 137.653C1.48543 137.659 0.583984 136.762 0.583984 135.653V123.72C0.583984 122.638 1.44483 121.752 2.52661 121.721L71.7597 119.734L230.757 123.687H259.826C260.931 123.687 261.826 124.582 261.826 125.687V137.307C261.826 138.412 260.931 139.307 259.826 139.307H230.757L71.7597 137.312L2.59384 137.653Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"8"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "8" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.42401 156.851C1.3255 156.843 0.439453 155.95 0.439453 154.851V142.918C0.439453 141.826 1.31544 140.935 2.40736 140.918L71.6152 139.807L230.613 141.509H259.682C260.786 141.509 261.682 142.405 261.682 143.509V155.13C261.682 156.234 260.786 157.13 259.682 157.13H230.613L71.6152 157.385L2.42401 156.851Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
data-id={"9"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
onClick={handleOnSkygardenClick}
|
||||
className={`${
|
||||
isSkygardenSidebar ? "opacity-70" : "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M505.113 193.377L505.114 165.798C505.114 164.688 504.208 163.79 503.098 163.798L430.35 163.871H403.662L293.347 163.164H263.827H259.682H230.613L71.6152 164.562L2.45794 163.923C1.34619 163.913 0.439453 164.811 0.439453 165.923V223.827C0.439453 224.881 1.25752 225.754 2.30935 225.823L77.9166 230.751L230.613 221.993H259.682L263.754 222.026L399.544 226.978L418.724 228.621L512.179 226.823C513.268 226.802 514.141 225.913 514.141 224.823V197.377C514.141 196.272 513.245 195.377 512.141 195.377H507.113C506.009 195.377 505.113 194.481 505.113 193.377Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"10"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "10" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.2506 269.924C1.2238 269.827 0.439453 268.964 0.439453 267.933V255.528C0.439453 254.362 1.43278 253.443 2.59519 253.534L71.4643 258.913C71.5648 258.921 71.6657 258.921 71.7662 258.914L230.613 247.274H259.682C260.786 247.274 261.682 248.169 261.682 249.274V260.894C261.682 261.999 260.786 262.894 259.682 262.894H230.613L71.795 276.488C71.6754 276.498 71.5551 276.498 71.4356 276.486L2.2506 269.924Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"11"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "11" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.2257 288.953C1.20972 288.844 0.439453 287.986 0.439453 286.965V274.564C0.439453 273.388 1.44909 272.466 2.62022 272.572L71.4377 278.818C71.5558 278.829 71.6746 278.829 71.7927 278.818L230.613 264.932H259.682C260.786 264.932 261.682 265.828 261.682 266.932V278.553C261.682 279.657 260.786 280.553 259.682 280.553H230.613L71.8214 296.392C71.6843 296.405 71.5462 296.405 71.4091 296.39L2.2257 288.953Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"12"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "12" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.97953 307.412C0.979949 307.285 0.230469 306.435 0.230469 305.428V293.52C0.230469 292.335 1.25562 291.41 2.43479 291.531L71.2033 298.593C71.3382 298.607 71.4742 298.607 71.6092 298.593L230.404 282.512H259.473C260.577 282.512 261.473 283.407 261.473 284.512V296.132C261.473 297.237 260.577 298.132 259.473 298.132H230.404L71.6447 316.165C71.4863 316.183 71.3263 316.182 71.1681 316.162L1.97953 307.412Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"13"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "13" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.1516 326.13C1.16857 325.987 0.439453 325.145 0.439453 324.151V312.253C0.439453 311.053 1.48944 310.123 2.68101 310.268L71.3798 318.626C71.5362 318.645 71.6943 318.646 71.8507 318.628L230.613 300.302H259.682C260.786 300.302 261.682 301.198 261.682 302.302V313.922C261.682 315.027 260.786 315.922 259.682 315.922H230.613L71.8862 336.199C71.7064 336.222 71.5243 336.22 71.3449 336.194L2.1516 326.13Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"14"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "14" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.11499 345.037C1.14862 344.879 0.439453 344.043 0.439453 343.064V331.176C0.439453 329.961 1.51449 329.027 2.718 329.196L71.3479 338.848C71.5253 338.873 71.7052 338.874 71.8829 338.851L230.613 318.333H259.682C260.786 318.333 261.682 319.228 261.682 320.333V331.953C261.682 333.057 260.786 333.953 259.682 333.953H230.613L71.9181 356.421C71.7173 356.45 71.5134 356.447 71.3133 356.414L2.11499 345.037Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"15"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "15" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.1042 364.486C1.14279 364.322 0.439453 363.489 0.439453 362.514V350.146C0.439453 348.921 1.53131 347.983 2.74249 348.169L71.3222 358.682C71.5165 358.711 71.7141 358.712 71.9086 358.685L230.472 335.993C230.565 335.979 230.66 335.973 230.755 335.973H259.682C260.786 335.973 261.682 336.868 261.682 337.973V349.593C261.682 350.697 260.786 351.593 259.682 351.593H230.767C230.664 351.593 230.562 351.601 230.46 351.617L71.9368 376.255C71.7238 376.288 71.5069 376.286 71.2944 376.25L2.1042 364.486Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"16"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "16" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.05471 382.86C1.11634 382.676 0.439453 381.853 0.439453 380.897V369.031C0.439453 367.79 1.55669 366.849 2.77898 367.06L71.2905 378.862C71.5055 378.899 71.7252 378.9 71.9407 378.866L230.458 353.937C230.561 353.921 230.665 353.913 230.769 353.913H259.682C260.786 353.913 261.682 354.809 261.682 355.913V367.533C261.682 368.638 260.786 369.533 259.682 369.533H230.781C230.669 369.533 230.557 369.543 230.447 369.561L71.9756 396.435C71.7373 396.475 71.4937 396.472 71.2565 396.425L2.05471 382.86Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"17"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "17" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M2.03222 402.111C1.10446 401.918 0.439453 401.1 0.439453 400.153V387.812C0.439453 386.557 1.58224 385.612 2.81511 385.848L71.259 398.936C71.4946 398.981 71.7363 398.984 71.9726 398.943L230.459 371.776C230.561 371.758 230.665 371.749 230.768 371.747L259.653 371.329C260.769 371.313 261.682 372.213 261.682 373.329V384.948C261.682 386.042 260.804 386.932 259.711 386.948L230.78 387.367C230.669 387.369 230.557 387.38 230.448 387.4L72.0004 416.512C71.746 416.559 71.485 416.555 71.2318 416.503L2.03222 402.111Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"18"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "18" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.99681 420.844C1.08595 420.638 0.439453 419.828 0.439453 418.894V406.568C0.439453 405.298 1.60794 404.35 2.85087 404.611L71.2285 418.985C71.4838 419.038 71.7472 419.041 72.0038 418.994L230.911 389.588C231.012 389.57 231.114 389.559 231.216 389.556L259.623 388.721C260.75 388.688 261.682 389.592 261.682 390.72V402.338C261.682 403.42 260.822 404.306 259.741 404.337L231.228 405.176C231.118 405.179 231.008 405.191 230.9 405.213L72.0314 436.562C71.757 436.616 71.4743 436.612 71.2015 436.55L1.99681 420.844Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"19"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "19" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.97475 439.77C1.07452 439.555 0.439453 438.75 0.439453 437.824V425.509C0.439453 424.23 1.62419 423.28 2.87318 423.557L71.2068 438.737C71.4762 438.797 71.755 438.801 72.0257 438.748L230.45 407.654C230.558 407.633 230.668 407.621 230.778 407.617L259.624 406.782C260.751 406.749 261.682 407.653 261.682 408.781V420.399C261.682 421.481 260.821 422.367 259.74 422.398L230.79 423.237C230.672 423.241 230.555 423.254 230.439 423.279L72.0532 456.315C71.7647 456.375 71.4666 456.371 71.1801 456.302L1.97475 439.77Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"20"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "20" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.95157 459.03C1.0626 458.806 0.439453 458.007 0.439453 457.09V444.787C0.439453 443.498 1.64144 442.545 2.89662 442.84L71.1818 458.873C71.4673 458.94 71.7639 458.944 72.0508 458.883L230.452 425.552C230.559 425.53 230.667 425.516 230.777 425.511L259.595 424.259C260.733 424.209 261.682 425.118 261.682 426.257V437.873C261.682 438.944 260.838 439.825 259.769 439.871L230.789 441.131C230.671 441.136 230.555 441.151 230.441 441.177L72.078 476.45C71.7737 476.518 71.4577 476.513 71.1553 476.437L1.95157 459.03Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"21"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "21" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.9172 477.608C1.04511 477.372 0.439453 476.581 0.439453 475.677V463.392C0.439453 462.088 1.66739 461.133 2.9314 461.454L71.1516 478.766C71.4564 478.843 71.7751 478.848 72.0818 478.779L230.439 443.216C230.554 443.19 230.672 443.174 230.79 443.169L259.595 441.917C260.733 441.868 261.682 442.777 261.682 443.915V455.532C261.682 456.602 260.838 457.483 259.769 457.53L230.802 458.789C230.676 458.794 230.551 458.812 230.428 458.841L72.1088 496.345C71.7849 496.422 71.4469 496.416 71.1255 496.33L1.9172 477.608Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"22"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "22" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.89456 496.891C1.03369 496.648 0.439453 495.862 0.439453 494.967V482.695C0.439453 481.382 1.68474 480.425 2.95433 480.763L71.1272 498.925C71.4475 499.011 71.784 499.015 72.1065 498.938L230.455 461.135C230.56 461.11 230.667 461.094 230.775 461.086L259.537 459.003C260.696 458.919 261.682 459.836 261.682 460.997V472.607C261.682 473.656 260.872 474.526 259.826 474.602L230.786 476.705C230.671 476.714 230.556 476.732 230.444 476.76L72.1332 516.503C71.7938 516.589 71.438 516.583 71.1013 516.488L1.89456 496.891Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"23"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "23" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.86101 515.582C1.01692 515.327 0.439453 514.55 0.439453 513.668V501.417C0.439453 500.088 1.71081 499.129 2.98832 499.494L71.1008 518.932C71.4378 519.028 71.7942 519.034 72.1342 518.949L230.459 479.409C230.561 479.384 230.665 479.366 230.77 479.357L259.509 476.859C260.677 476.758 261.682 477.679 261.682 478.852V490.457C261.682 491.494 260.889 492.36 259.855 492.449L230.782 494.977C230.669 494.986 230.558 495.006 230.448 495.034L72.1608 536.514C71.804 536.608 71.4284 536.601 71.0753 536.494L1.86101 515.582Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"24"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "24" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.84016 534.405C1.0066 534.144 0.439453 533.371 0.439453 532.497V520.26C0.439453 518.923 1.72726 517.962 3.00946 518.343L71.0804 538.583C71.4303 538.687 71.8019 538.693 72.1551 538.601L230.463 497.322C230.563 497.297 230.664 497.278 230.766 497.268L259.48 494.356C260.658 494.237 261.682 495.162 261.682 496.346V507.946C261.682 508.972 260.905 509.832 259.884 509.935L230.778 512.887C230.668 512.898 230.559 512.918 230.453 512.947L72.1814 556.166C71.8117 556.267 71.4208 556.259 71.0553 556.144L1.84016 534.405Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"25"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "25" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M1.81832 553.549C0.995852 553.28 0.439453 552.513 0.439453 551.648V539.426C0.439453 538.079 1.74467 537.117 3.03162 537.516L71.057 558.602C71.4215 558.715 71.8107 558.722 72.1787 558.621L230.451 515.161C230.559 515.131 230.668 515.111 230.779 515.099L259.48 512.189C260.658 512.069 261.682 512.994 261.682 514.179V525.778C261.682 526.805 260.905 527.665 259.884 527.768L230.79 530.718C230.672 530.73 230.555 530.753 230.441 530.786L72.2048 576.184C71.8206 576.295 71.4121 576.287 71.0321 576.163L1.81832 553.549Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
width="515"
|
||||
height="563"
|
||||
viewBox="0 0 515 563"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`absolute transition-opacity duration-300 ease-in-out top-0 left-0 w-full h-full z-20 opacity-100`}
|
||||
x={720}
|
||||
y={738}
|
||||
>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"50"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "50" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.13 20.5944C502.267 20.6425 503.215 19.734 503.215 18.5962V5.703C503.215 4.63551 502.376 3.75618 501.31 3.70527L432.953 0.442034C432.792 0.43432 432.63 0.44624 432.471 0.477532L418.059 3.31905L293.346 14.6605H263.827C262.722 14.6605 261.827 15.556 261.827 16.6605V28.2808C261.827 29.3854 262.722 30.2808 263.827 30.2808H293.346L418.059 20.2586L430.902 17.6788C431.059 17.6472 431.22 17.6347 431.38 17.6415L501.13 20.5944Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"26"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "26" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.154 39.531C502.282 39.5655 503.215 38.6605 503.215 37.532V25.6074C503.215 24.5427 502.381 23.6647 501.317 23.6101L431.869 20.0411C431.716 20.0333 431.563 20.0429 431.413 20.0699L418.091 22.4616L293.346 32.2715H263.827C262.722 32.2715 261.827 33.1669 261.827 34.2715V45.8917C261.827 46.9963 262.722 47.8917 263.827 47.8917H293.346L418.091 39.6656L431.445 37.4381C431.574 37.4167 431.705 37.4078 431.835 37.4118L501.154 39.531Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"27"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "27" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.166 58.5776C502.29 58.6049 503.215 57.7018 503.215 56.5782V44.6527C503.215 43.5832 502.373 42.7029 501.305 42.6547L431.862 39.5228C431.714 39.5161 431.565 39.5259 431.419 39.5522L418.091 41.945L293.346 49.8544H263.827C262.722 49.8544 261.827 50.7498 261.827 51.8544V63.4746C261.827 64.5791 262.722 65.4746 263.827 65.4746H293.346L418.091 58.6989L431.483 56.9101C431.587 56.8962 431.692 56.8905 431.796 56.893L501.166 58.5776Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"28"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "28" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.179 77.594C502.297 77.6141 503.215 76.7129 503.215 75.5943V63.668C503.215 62.5936 502.366 61.7112 501.292 61.6695L431.823 58.9732C431.701 58.9685 431.578 58.975 431.456 58.9928L418.091 60.9483L293.346 67.5073H263.827C262.722 67.5073 261.827 68.4028 261.827 69.5073V81.1276C261.827 82.2321 262.722 83.1276 263.827 83.1276H293.346L418.091 77.7022L431.639 76.3426L501.179 77.594Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"29"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "29" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.191 96.6575C502.305 96.6706 503.215 95.7714 503.215 94.6577V82.7308C503.215 81.6515 502.359 80.7669 501.28 80.7318L431.784 78.4715C431.687 78.4684 431.591 78.4723 431.494 78.4831L418.091 79.9989L293.346 85.2077H263.827C262.722 85.2077 261.827 86.1031 261.827 87.2077V98.8279C261.827 99.9325 262.722 100.828 263.827 100.828H293.346L418.091 96.7528L431.639 95.8433L501.191 96.6575Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"30"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "30" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.204 115.766C502.313 115.772 503.215 114.875 503.215 113.766V101.839C503.215 100.754 502.351 99.8677 501.267 99.8392L431.639 98.0125L418.091 99.0945L293.346 102.953H263.827C262.722 102.953 261.827 103.848 261.827 104.953V116.573C261.827 117.678 262.722 118.573 263.827 118.573H293.346L418.091 115.848L431.639 115.389L501.204 115.766Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"31"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "31" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.217 134.863C502.32 134.862 503.215 133.967 503.215 132.863V120.935C503.215 119.846 502.344 118.957 501.255 118.936L431.639 117.547L418.091 118.179L293.346 120.687H263.827C262.722 120.687 261.827 121.582 261.827 122.687V134.307C261.827 135.412 262.722 136.307 263.827 136.307H293.346L418.091 134.933L431.639 134.923L501.217 134.863Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"32"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "32" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.229 154.048C502.328 154.04 503.215 153.147 503.215 152.048V139.634C503.215 138.535 502.328 137.642 501.228 137.634L431.639 137.17L418.091 137.352L293.346 138.51H263.694C262.59 138.51 261.694 139.405 261.694 140.51V152.13C261.694 153.234 262.59 154.13 263.694 154.13H293.346L418.091 154.106L431.639 154.546L501.229 154.048Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"33"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "33" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.146 267.629C502.221 267.588 503.07 266.706 503.07 265.631V252.795C503.07 251.661 502.129 250.754 500.997 250.796L430.66 253.387C430.55 253.391 430.439 253.386 430.33 253.371L417.946 251.774L293.202 244.256H263.682C262.578 244.256 261.682 245.152 261.682 246.256V257.877C261.682 258.981 262.578 259.877 263.682 259.877L293.202 259.877L417.946 268.528L430.316 270.294C430.435 270.311 430.555 270.317 430.675 270.312L501.146 267.629Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"34"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "34" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.144 287.089C502.219 287.049 503.07 286.166 503.07 285.09V272.254C503.07 271.121 502.131 270.215 500.999 270.255L430.69 272.748C430.56 272.752 430.43 272.744 430.301 272.724L417.946 270.736L293.202 261.868H263.682C262.578 261.868 261.682 262.763 261.682 263.868V275.488C261.682 276.593 262.578 277.488 263.682 277.488L293.202 277.488L417.946 287.49L430.287 289.645C430.425 289.669 430.565 289.679 430.705 289.673L501.144 287.089Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"35"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "35" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.17 305.71C502.234 305.657 503.07 304.778 503.07 303.712V291.364C503.07 290.226 502.123 289.318 500.987 289.365L430.731 292.292C430.574 292.299 430.416 292.287 430.262 292.256L417.946 289.833L293.202 279.615H263.682C262.578 279.615 261.682 280.51 261.682 281.615V293.235C261.682 294.34 262.578 295.235 263.682 295.235L293.202 295.235L417.946 306.587L430.241 309.175C430.409 309.21 430.581 309.224 430.753 309.215L501.17 305.71Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"36"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "36" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.182 324.863C502.242 324.803 503.07 323.927 503.07 322.866V310.518C503.07 309.376 502.116 308.466 500.975 308.521L430.776 311.88C430.589 311.889 430.402 311.872 430.22 311.829L417.946 308.925L293.202 297.406H263.682C262.578 297.406 261.682 298.302 261.682 299.406V311.026C261.682 312.131 262.578 313.026 263.682 313.026L293.202 313.026L417.802 325.664C417.898 325.674 417.993 325.691 418.086 325.714L430.2 328.747C430.395 328.795 430.597 328.815 430.797 328.803L501.182 324.863Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"37"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "37" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.194 343.893C502.249 343.828 503.07 342.954 503.07 341.897V329.551C503.07 328.404 502.108 327.492 500.962 327.554L430.778 331.348C430.59 331.358 430.401 331.342 430.217 331.299L417.946 328.445L293.202 315.312H263.682C262.578 315.312 261.682 316.208 261.682 317.312V328.933C261.682 330.037 262.578 330.933 263.682 330.933L293.202 330.933L417.946 345.199L430.197 348.217C430.394 348.265 430.597 348.284 430.8 348.271L501.194 343.893Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"38"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "38" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.207 362.866C502.256 362.794 503.07 361.922 503.07 360.871V348.526C503.07 347.374 502.1 346.461 500.95 346.53L430.819 350.756C430.604 350.769 430.388 350.747 430.18 350.691L418.089 347.445C417.994 347.42 417.897 347.401 417.8 347.39L293.202 332.989H263.682C262.578 332.989 261.682 333.884 261.682 334.989V346.609C261.682 347.714 262.578 348.609 263.682 348.609L293.202 348.609L417.796 364.142C417.896 364.154 417.995 364.174 418.092 364.202L430.161 367.608C430.381 367.67 430.611 367.694 430.84 367.679L501.207 362.866Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"39"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "39" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.218 382.126C502.262 382.049 503.07 381.179 503.07 380.131V367.303C503.07 366.141 502.084 365.224 500.925 365.308L430.869 370.399C430.622 370.417 430.373 370.389 430.135 370.316L418.116 366.61C418.003 366.575 417.887 366.55 417.769 366.536L293.202 351.339L263.714 350.871C262.597 350.853 261.682 351.754 261.682 352.871V364.459C261.682 365.564 262.578 366.459 263.682 366.459L293.202 366.459L417.77 383.287C417.887 383.303 418.003 383.329 418.115 383.366L430.123 387.233C430.368 387.312 430.627 387.343 430.884 387.324L501.218 382.126Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"40"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "40" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.23 401.397C502.269 401.314 503.07 400.446 503.07 399.404V386.577C503.07 385.411 502.076 384.492 500.913 384.583L430.905 390.105C430.634 390.126 430.362 390.092 430.104 390.004L418.128 385.93C418.007 385.889 417.882 385.859 417.755 385.842L293.202 368.799L263.714 368.332C262.597 368.314 261.682 369.214 261.682 370.331V381.948C261.682 383.041 262.56 383.932 263.654 383.948L293.202 384.37L417.753 402.594C417.881 402.612 418.008 402.644 418.131 402.687L430.092 406.921C430.357 407.015 430.639 407.052 430.919 407.03L501.23 401.397Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"41"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "41" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.23 420.559C502.269 420.475 503.07 419.608 503.07 418.565V405.739C503.07 404.572 502.076 403.653 500.913 403.745L430.905 409.266C430.634 409.287 430.362 409.253 430.104 409.166L418.115 405.087C418.003 405.048 417.887 405.02 417.77 405.003L293.202 386.16L263.714 385.692C262.597 385.675 261.682 386.575 261.682 387.692V399.34C261.682 400.421 262.541 401.306 263.622 401.339L293.202 402.23L417.763 421.754C417.885 421.774 418.005 421.804 418.121 421.845L430.092 426.083C430.357 426.176 430.639 426.213 430.919 426.191L501.23 420.559Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"42"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "42" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.229 439.92C502.269 439.837 503.07 438.969 503.07 437.926V425.099C503.07 423.933 502.077 423.014 500.914 423.105L430.938 428.576C430.646 428.599 430.352 428.557 430.078 428.454L418.137 423.963C418.01 423.915 417.879 423.881 417.745 423.86L293.202 404.222L263.714 403.754C262.597 403.736 261.682 404.637 261.682 405.754V417.402C261.682 418.483 262.541 419.368 263.622 419.401L293.202 420.292L417.738 440.611C417.876 440.634 418.012 440.671 418.143 440.722L430.067 445.371C430.348 445.48 430.651 445.525 430.952 445.501L501.229 439.92Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"43"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "43" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.253 458.737C502.283 458.642 503.07 457.779 503.07 456.745V443.922C503.07 442.747 502.061 441.825 500.89 441.931L430.947 448.266C430.649 448.293 430.349 448.253 430.069 448.149L418.117 443.701C418.003 443.659 417.886 443.627 417.767 443.606L293.358 421.696C293.254 421.677 293.149 421.667 293.043 421.665L263.714 421.2C262.597 421.182 261.682 422.083 261.682 423.2V434.848C261.682 435.929 262.541 436.814 263.622 436.847L293.052 437.734C293.152 437.737 293.251 437.747 293.349 437.765L417.76 460.358C417.884 460.38 418.005 460.415 418.123 460.46L430.058 465.065C430.345 465.176 430.654 465.219 430.961 465.191L501.253 458.737Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"44"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "44" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.265 477.755C502.29 477.655 503.07 476.794 503.07 475.765V462.945C503.07 461.764 502.053 460.84 500.878 460.954L430.986 467.719C430.663 467.75 430.338 467.702 430.037 467.58L418.134 462.723C418.009 462.672 417.879 462.634 417.746 462.609L293.368 439.358C293.257 439.337 293.145 439.326 293.032 439.324L263.714 438.859C262.597 438.841 261.682 439.741 261.682 440.858V452.506C261.682 453.587 262.541 454.473 263.622 454.505L293.041 455.392C293.148 455.395 293.254 455.407 293.359 455.427L417.74 479.361C417.877 479.387 418.011 479.428 418.139 479.482L430.027 484.495C430.334 484.625 430.668 484.676 430.999 484.643L501.265 477.755Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"45"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "45" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.291 496.547C502.304 496.435 503.07 495.579 503.07 494.56V482.23C503.07 481.044 502.045 480.119 500.865 480.24L431.024 487.433C430.677 487.469 430.327 487.413 430.008 487.272L418.151 482.009C418.015 481.948 417.872 481.903 417.726 481.874L293.346 457.376C293.25 457.357 293.153 457.345 293.055 457.34L263.777 455.947C262.637 455.893 261.682 456.803 261.682 457.945V469.587C261.682 470.644 262.504 471.518 263.559 471.583L293.202 473.417L417.72 498.626C417.87 498.656 418.017 498.704 418.156 498.768L429.991 504.184C430.32 504.334 430.684 504.393 431.044 504.353L501.291 496.547Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"46"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "46" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.303 515.73C502.311 515.612 503.07 514.759 503.07 513.744V500.932C503.07 499.736 502.028 498.808 500.84 498.946L431.072 507.044C430.695 507.088 430.313 507.023 429.971 506.858L418.169 501.149C418.021 501.078 417.865 501.025 417.704 500.991L293.356 475.202C293.253 475.181 293.149 475.168 293.045 475.163L263.777 473.77C262.637 473.716 261.682 474.626 261.682 475.768V487.411C261.682 488.467 262.504 489.341 263.559 489.407L293.054 491.232C293.152 491.238 293.25 491.251 293.347 491.272L417.699 517.743C417.863 517.778 418.022 517.833 418.173 517.908L429.962 523.773C430.309 523.945 430.7 524.013 431.085 523.968L501.303 515.73Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"47"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "47" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.302 534.992C502.31 534.875 503.07 534.021 503.07 533.006V520.678C503.07 519.488 502.038 518.561 500.855 518.69L431.096 526.259C430.704 526.301 430.308 526.227 429.958 526.045L418.182 519.927C418.026 519.846 417.859 519.785 417.686 519.748L293.365 492.668C293.256 492.645 293.146 492.63 293.035 492.625L263.777 491.233C262.637 491.178 261.682 492.088 261.682 493.23V504.873C261.682 505.93 262.504 506.804 263.559 506.869L293.044 508.693C293.149 508.7 293.253 508.715 293.356 508.738L417.681 536.499C417.857 536.538 418.027 536.601 418.186 536.686L429.943 542.956C430.302 543.148 430.711 543.225 431.115 543.178L501.302 534.992Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"48"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "48" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.328 553.645C502.324 553.516 503.07 552.667 503.07 551.662V539.341C503.07 538.14 502.02 537.21 500.829 537.355L431.136 545.829C430.719 545.88 430.296 545.798 429.929 545.595L418.189 539.121C418.028 539.032 417.855 538.966 417.676 538.925L293.394 510.01C293.266 509.981 293.136 509.963 293.004 509.959L263.746 509.031C262.617 508.995 261.682 509.901 261.682 511.03V522.676C261.682 523.745 262.523 524.624 263.59 524.674L293.013 526.027C293.139 526.033 293.263 526.051 293.385 526.08L417.671 555.676C417.854 555.719 418.029 555.788 418.192 555.88L429.914 562.506C430.291 562.719 430.726 562.804 431.155 562.748L501.328 553.645Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
<path
|
||||
onClick={handleOnFloorClick}
|
||||
data-id={"49"}
|
||||
onMouseOver={handleOnFloorMouseEnter}
|
||||
className={`${
|
||||
currentFloor?.id === "49" && isFloorSidebar
|
||||
? "opacity-70"
|
||||
: "opacity-0"
|
||||
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
|
||||
d="M501.279 248.587C502.358 248.552 503.215 247.668 503.215 246.588V231.533C503.215 230.411 502.292 229.508 501.171 229.533L418.224 231.361L403.255 229.795L293.346 224.549H263.827C262.722 224.549 261.827 225.444 261.827 226.549V240.391C261.827 241.506 262.74 242.406 263.855 242.39L293.346 241.969L418.224 249.679L430.639 250.838L501.279 248.587Z"
|
||||
fill="#00BED7"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FloorsHighlighting;
|
||||
@@ -0,0 +1,128 @@
|
||||
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
|
||||
import IUnit from "../../../types/IUnit";
|
||||
import Button from "../../Button";
|
||||
import CrossIcon from "../../icons/CrossIcon";
|
||||
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
|
||||
|
||||
interface MobileFloorDescriptionProps {
|
||||
descriptionFloor: IDesctiptionFloor | null;
|
||||
floorApartments: IUnit[];
|
||||
isLeft: boolean;
|
||||
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
}
|
||||
|
||||
const MobileFloorDescription = ({
|
||||
descriptionFloor,
|
||||
floorApartments,
|
||||
isLeft,
|
||||
onClick,
|
||||
}: MobileFloorDescriptionProps) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[328px]`}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="flex justify-between border-b pb-4">
|
||||
<div className="flex flex-col">
|
||||
<p
|
||||
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
|
||||
>
|
||||
{descriptionFloor?.floor} Floor
|
||||
</p>
|
||||
<div className="flex gap-2 items-center">
|
||||
<p className="text-[#73787C] font-semibold text-caption-m">
|
||||
{descriptionFloor?.wing}
|
||||
</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="font-semibold text-caption-m text-[#00BED7]">
|
||||
{floorApartments.length} units
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button buttonType="tertiary" icon={<CrossIcon />} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="p-1 flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Flex"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Squared"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">Studio Squared</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "1 BR Squared"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">1 BR Squared</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "2 BR Squared"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] text-nowrap">
|
||||
2 BR Squared
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={onClick}
|
||||
buttonType="cta"
|
||||
className="justify-center"
|
||||
text="Explore"
|
||||
icon={<RightArrowSliderIcon />}
|
||||
iconPos="right"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute ${
|
||||
isLeft ? "right-[0px]" : "left-[0px]"
|
||||
} -top-[35px] `}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileFloorDescription;
|
||||
@@ -0,0 +1,72 @@
|
||||
import Button from "../../Button";
|
||||
import CrossIcon from "../../icons/CrossIcon";
|
||||
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
|
||||
|
||||
interface MobileSkygardenDescriptionProps {
|
||||
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
isLeft: boolean;
|
||||
}
|
||||
|
||||
const MobileSkygardenDescription = ({
|
||||
onClick,
|
||||
isLeft,
|
||||
}: MobileSkygardenDescriptionProps) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-fit`}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="flex justify-between border-b pb-4">
|
||||
<div className="flex flex-col items-start justify-start">
|
||||
<p
|
||||
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
|
||||
>
|
||||
Sky Garden
|
||||
</p>
|
||||
</div>
|
||||
<Button buttonType="tertiary" icon={<CrossIcon />} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="p-1 flex justify-center items-center">8</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] w-full">Indoor</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">3 amenities</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
8
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">Studio</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">14 amenities</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={onClick}
|
||||
buttonType="cta"
|
||||
className="justify-center"
|
||||
text="Explore"
|
||||
icon={<RightArrowSliderIcon />}
|
||||
iconPos="right"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute ${
|
||||
isLeft ? "right-[0px]" : "left-[0px]"
|
||||
} -top-[35px] `}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileSkygardenDescription;
|
||||
@@ -0,0 +1,461 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { MouseEvent, useEffect, useState } from "react";
|
||||
import FloorDescription from "../FloorDescription";
|
||||
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
|
||||
import SkygardenDescription from "../SkygardenDescription";
|
||||
import FloorSidebar from "../FloorSidebar/FloorSidebar";
|
||||
import SkygardenSidebar from "../SkygardenSidebar/SkygardenSidebar";
|
||||
import useWingSidebar from "../../../store/useWingSidebar";
|
||||
import useModal from "../../../store/useModal";
|
||||
import {
|
||||
laptopWidth,
|
||||
mobileWidht,
|
||||
descriptions,
|
||||
} from "../../../consts/masterplan";
|
||||
import LoaderModal from "../../modals/LoaderModal";
|
||||
import FloorNumbers from "./FloorNumbers";
|
||||
import WingSignatures from "./WingSignatures";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import FloorsHighlighting from "./FloorsHighlighting";
|
||||
import MobileFloorDescription from "./MobileFloorDescription";
|
||||
import WingFloorModal from "../../modals/mobile/WingFloorModal";
|
||||
import MobileSkygardenDescription from "./MobileSkygardenDescription";
|
||||
import IUnit from "../../../types/IUnit";
|
||||
import api from "../../../utils/api";
|
||||
|
||||
const skyGardenFloor = 22;
|
||||
|
||||
const SequenceWing = () => {
|
||||
const [width, setWidth] = useState<number>(0);
|
||||
const [top, setTop] = useState<number>(0);
|
||||
const [left, setLeft] = useState<number>(0);
|
||||
const { isSidebar, setIsSidebar } = useWingSidebar();
|
||||
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
|
||||
const [currentHoveredFloor, setHoverCurrentFloor] =
|
||||
useState<null | IDesctiptionFloor>(null);
|
||||
const [isLoading] = useState(false);
|
||||
const [currentFloor, setCurrentFloor] = useState<IDesctiptionFloor | null>(
|
||||
null
|
||||
);
|
||||
const [isWrapperHovered, setIsWrapperHovered] = useState(false);
|
||||
const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false);
|
||||
const [isFloorSidebar, setIsFloorSidebar] = useState(false);
|
||||
const { setModal } = useModal();
|
||||
const [apartments, setApartments] = useState<IUnit[]>([]);
|
||||
const [currentHoveredApartments, setCurrentHoveredApartments] = useState<
|
||||
IUnit[]
|
||||
>([]);
|
||||
const [, setSelectedApartments] = useState<IUnit[]>([]);
|
||||
const [isLeft, setIsLeft] = useState(false);
|
||||
|
||||
const handleOnFloorMouseEnter = (
|
||||
e: React.MouseEvent<SVGPathElement, MouseEvent>
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
const id = e.currentTarget.dataset.id;
|
||||
if (!id) return;
|
||||
const _currentFloor = descriptions.find((desc) => desc.id === id);
|
||||
if (!_currentFloor) return;
|
||||
setHoverCurrentFloor(_currentFloor);
|
||||
const _currentHoveredApartments = apartments.filter((apartment) => {
|
||||
const wing =
|
||||
apartment.unitNo.split("-")[0] === "E" ? "East Wing" : "West Wing";
|
||||
return (
|
||||
apartment.floor === _currentFloor.floor && wing === _currentFloor.wing
|
||||
);
|
||||
});
|
||||
setIsWrapperHovered(true);
|
||||
setCurrentHoveredApartments(_currentHoveredApartments);
|
||||
};
|
||||
|
||||
const handleOnWingWrapperMouseEnter = (
|
||||
e: React.MouseEvent<SVGSVGElement>
|
||||
) => {
|
||||
(e as unknown as Event).stopPropagation();
|
||||
setIsWrapperHovered(true);
|
||||
};
|
||||
const handleOnWingWrapperMouseLeave = () => {
|
||||
setIsWrapperHovered(false);
|
||||
};
|
||||
|
||||
const handleOnFloorClick = () => {
|
||||
if (!currentHoveredFloor && !currentHoveredApartments) return;
|
||||
setCurrentFloor(currentHoveredFloor);
|
||||
setSelectedApartments(currentHoveredApartments);
|
||||
|
||||
const screenWidth = window.innerWidth;
|
||||
|
||||
const isMobile = screenWidth <= mobileWidht;
|
||||
if (isMobile) return;
|
||||
// <640
|
||||
setIsFloorSidebar(true);
|
||||
setIsSkygardenSidebar(false);
|
||||
setIsSidebar(true);
|
||||
};
|
||||
|
||||
const handleOnSkygardenClick = () => {
|
||||
if (!isMobile) {
|
||||
setIsSkygardenSidebar(true);
|
||||
setIsFloorSidebar(false);
|
||||
setIsSidebar(true);
|
||||
} else {
|
||||
// setModal(<WingFloorModal />);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseMove = (
|
||||
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
|
||||
) => {
|
||||
const screenWidth = window.innerWidth;
|
||||
const _isLeft = e.clientX > screenWidth / 2;
|
||||
setIsLeft(_isLeft);
|
||||
// <640
|
||||
if (screenWidth <= mobileWidht) return;
|
||||
|
||||
// const _top = screenHeight / 16;
|
||||
if (screenWidth > laptopWidth) {
|
||||
const x = _isLeft ? e.clientX - 795 : e.clientX - 384;
|
||||
setMousePos([x, e.clientY + top - 25]);
|
||||
} else {
|
||||
// 640-1072
|
||||
if (screenWidth > mobileWidht) {
|
||||
const x = _isLeft ? e.clientX + left - 800 : e.clientX - 385 + left;
|
||||
setMousePos([x, e.clientY + top - 25]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnMouseDown = (
|
||||
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
|
||||
) => {
|
||||
const isFloorClicked = Boolean(e.target.dataset.id);
|
||||
if (!isFloorClicked) return;
|
||||
const screenWidth = window.innerWidth;
|
||||
const _isLeft = e.clientX > screenWidth / 2;
|
||||
setIsLeft(_isLeft);
|
||||
|
||||
if (screenWidth > mobileWidht) return;
|
||||
// <640
|
||||
|
||||
const x = _isLeft ? e.clientX - 724 + left : e.clientX - 444 + left;
|
||||
|
||||
setMousePos([x, e.clientY + Math.abs(top) + 20]);
|
||||
};
|
||||
|
||||
// function handleOnMouseDown(e: MouseEvent | any) {
|
||||
// const screenWidth = window.innerWidth;
|
||||
// const screenHeight = window.innerHeight;
|
||||
// // >1072
|
||||
// if (screenWidth > laptopWidth) {
|
||||
// const _top = screenWidth / 2 - screenHeight / 2;
|
||||
// setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
|
||||
// } else {
|
||||
// // 640-1072
|
||||
// if (screenWidth > mobileWidht) {
|
||||
// const _top = screenHeight / 4;
|
||||
// const _left = laptopWidth - screenWidth;
|
||||
// setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
|
||||
// // setMousePos([e.clientX - 444 + _left, e.clientY + Math.abs(_top) + 30]);
|
||||
// // <640
|
||||
// } else {
|
||||
// const _top = screenHeight / 2.5;
|
||||
// const _left = laptopWidth - screenWidth;
|
||||
// setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
function handleResize() {
|
||||
const screenWidth = window.innerWidth;
|
||||
const screenHeight = window.innerHeight;
|
||||
if (screenWidth > laptopWidth) {
|
||||
setWidth(screenWidth);
|
||||
setTop(screenWidth / 2 - screenHeight / 2);
|
||||
setLeft(0);
|
||||
} else {
|
||||
if (screenWidth > mobileWidht) {
|
||||
const _top = screenHeight / 16;
|
||||
setTop(_top);
|
||||
} else {
|
||||
const _top = screenHeight / 5.5;
|
||||
setTop(_top);
|
||||
}
|
||||
const _left = (laptopWidth - screenWidth) * 1.1;
|
||||
const _width = screenWidth + _left * 1.9;
|
||||
|
||||
setWidth(_width);
|
||||
setLeft(_left);
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnExploreFloorClick = (
|
||||
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
// if (!currentHoveredFloor) return;
|
||||
setModal(
|
||||
<WingFloorModal
|
||||
// currentFloor={currentHoveredFloor}
|
||||
// floorApartments={currentHoveredApartments}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const handleOnExploreSkygardenClick = (
|
||||
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
// if (!currentHoveredFloor) return;
|
||||
setModal(
|
||||
<WingFloorModal
|
||||
// currentFloor={currentHoveredFloor}
|
||||
// floorApartments={currentHoveredApartments}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("mousedown", handleOnMouseDown);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
window.removeEventListener("mousedown", handleOnMouseDown);
|
||||
};
|
||||
}, [handleMouseMove]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSidebar) {
|
||||
setIsFloorSidebar(false);
|
||||
setIsSkygardenSidebar(false);
|
||||
}
|
||||
}, [isSidebar]);
|
||||
|
||||
// useEffect(() => {
|
||||
// const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`;
|
||||
// const perPage = 1000;
|
||||
// const getApartments = (token: string) =>
|
||||
// getFilteredApartments(
|
||||
// token,
|
||||
// setApartments,
|
||||
// initialRoveHomeCheckboxes,
|
||||
// apartmentTypeCheckboxes,
|
||||
// debouncedSliders,
|
||||
// switchers,
|
||||
// viewCheckboxes,
|
||||
// sortList,
|
||||
// pageInitial,
|
||||
// perPage
|
||||
// );
|
||||
|
||||
// setIsLoading(true);
|
||||
|
||||
// getApartments(localStorageToken)
|
||||
// .then(() => {
|
||||
// setIsLoading(false);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// const errorStatus = error.response.status;
|
||||
|
||||
// if (errorStatus === 401) {
|
||||
// updateAccessToken()
|
||||
// .then((token) => {
|
||||
// if (token) {
|
||||
// getApartments(token).then(() => {
|
||||
// setIsLoading(false);
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// setIsLoading(false);
|
||||
// console.error("error", error);
|
||||
// });
|
||||
// } else {
|
||||
// setIsLoading(false);
|
||||
// console.error("error", error);
|
||||
// }
|
||||
// });
|
||||
// }, [
|
||||
// setApartments,
|
||||
// apartmentTypeCheckboxes,
|
||||
// debouncedSliders,
|
||||
// switchers,
|
||||
// viewCheckboxes,
|
||||
// sortList,
|
||||
// ]);
|
||||
|
||||
async function getUnits() {
|
||||
try {
|
||||
const result: IUnit[] = await api.get("units").json();
|
||||
|
||||
setApartments(result);
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getUnits();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading) {
|
||||
setModal(<LoaderModal />);
|
||||
} else {
|
||||
setModal(null);
|
||||
}
|
||||
}, [isLoading, setModal]);
|
||||
|
||||
return (
|
||||
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none">
|
||||
<div
|
||||
className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all sm:block hidden"
|
||||
style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
|
||||
>
|
||||
<FloorSidebar currentFloor={currentFloor} />
|
||||
</div>
|
||||
<div
|
||||
className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all sm:block hidden"
|
||||
style={{ right: `${isSkygardenSidebar ? "0" : "-50%"}` }}
|
||||
>
|
||||
<SkygardenSidebar
|
||||
onMouseEnter={handleOnWingWrapperMouseLeave}
|
||||
onClick={() => setIsSkygardenSidebar(false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute left-0 transition-[left]"
|
||||
style={{
|
||||
width: `${width}px`,
|
||||
height: `${width}px`,
|
||||
top: `-${top}px`,
|
||||
left: `${
|
||||
isSkygardenSidebar || isFloorSidebar ? "-25%" : `-${left}px`
|
||||
}`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:flex hidden ${
|
||||
currentHoveredFloor?.floor === skyGardenFloor && isWrapperHovered
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
top: mousePos[1] - 25,
|
||||
left: `${
|
||||
isSkygardenSidebar || isFloorSidebar
|
||||
? `calc(${mousePos[0]}px + 25%)`
|
||||
: `${mousePos[0]}px`
|
||||
}`,
|
||||
}}
|
||||
>
|
||||
<SkygardenDescription isLeft={isLeft} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:flex hidden ${
|
||||
currentHoveredFloor?.floor !== skyGardenFloor &&
|
||||
currentHoveredFloor &&
|
||||
isWrapperHovered
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
top: mousePos[1],
|
||||
left: `${
|
||||
isSkygardenSidebar || isFloorSidebar
|
||||
? `calc(${mousePos[0]}px + 25%)`
|
||||
: `${mousePos[0]}px`
|
||||
}`,
|
||||
}}
|
||||
>
|
||||
<FloorDescription
|
||||
isLeft={isLeft}
|
||||
descriptionFloor={currentHoveredFloor}
|
||||
floorApartments={currentHoveredApartments}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:hidden flex ${
|
||||
currentHoveredFloor?.floor !== skyGardenFloor &&
|
||||
currentHoveredFloor &&
|
||||
isWrapperHovered
|
||||
? "flex"
|
||||
: "hidden"
|
||||
}`}
|
||||
style={{
|
||||
top: mousePos[1],
|
||||
left: `${mousePos[0]}px`,
|
||||
}}
|
||||
>
|
||||
<MobileFloorDescription
|
||||
isLeft={isLeft}
|
||||
onClick={handleOnExploreFloorClick}
|
||||
descriptionFloor={currentHoveredFloor}
|
||||
floorApartments={currentHoveredApartments}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:hidden flex ${
|
||||
currentHoveredFloor?.floor === skyGardenFloor &&
|
||||
currentHoveredFloor &&
|
||||
isWrapperHovered
|
||||
? "flex"
|
||||
: "hidden"
|
||||
}`}
|
||||
style={{
|
||||
top: mousePos[1],
|
||||
left: `${mousePos[0]}px`,
|
||||
}}
|
||||
>
|
||||
<MobileSkygardenDescription
|
||||
onClick={handleOnExploreSkygardenClick}
|
||||
isLeft={isLeft}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
width={`${width}px`}
|
||||
height={`${width}px`}
|
||||
src="/images/sequenceWing.jpg"
|
||||
className={`absolute z-10 duration-300 transition-opacity ease-in-out opacity-100 select-none`}
|
||||
alt=""
|
||||
/>
|
||||
<svg
|
||||
width="1920"
|
||||
height="1920"
|
||||
viewBox="0 0 1920 1920"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`absolute top-0 left-0 duration-300 transition-opacity ease-in-out w-full h-full opacity-100 z-10 `}
|
||||
onMouseOver={handleOnWingWrapperMouseLeave}
|
||||
>
|
||||
{/* Подписи Крылья */}
|
||||
<WingSignatures />
|
||||
|
||||
{/* Цифры этажи */}
|
||||
<FloorNumbers />
|
||||
|
||||
{/* Этажи */}
|
||||
<FloorsHighlighting
|
||||
handleOnFloorClick={handleOnFloorClick}
|
||||
handleOnSkygardenClick={handleOnSkygardenClick}
|
||||
handleOnWingWrapperMouseEnter={handleOnWingWrapperMouseEnter}
|
||||
handleOnFloorMouseEnter={handleOnFloorMouseEnter}
|
||||
handleOnWingWrapperMouseLeave={handleOnWingWrapperMouseLeave}
|
||||
currentFloor={currentFloor}
|
||||
isFloorSidebar={isFloorSidebar}
|
||||
isSkygardenSidebar={isSkygardenSidebar}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SequenceWing;
|
||||
@@ -0,0 +1,39 @@
|
||||
const WingSignatures = () => {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
y={641}
|
||||
x={818}
|
||||
width="66"
|
||||
height="18"
|
||||
viewBox="0 0 66 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="66" height="18" rx="9" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M13.95 13H8.73V5.32H13.88V6.47H10.14V8.56H13.4V9.7H10.14V11.85H13.95V13ZM19.3193 13H18.0493L18.0193 12.24H17.9993C17.6893 12.78 17.1593 13.11 16.4293 13.11C15.3993 13.11 14.7193 12.43 14.7193 11.48C14.7193 10.82 15.0393 10.32 15.7393 10.08C16.2893 9.89 17.1293 9.84 17.9793 9.81V9.41C17.9793 8.92 17.6393 8.56 17.0093 8.56C16.4293 8.56 16.0893 8.85 15.9293 9.27L14.8893 8.76C15.2493 7.94 15.9793 7.52 17.0693 7.52C18.5193 7.52 19.3193 8.23 19.3193 9.41V13ZM16.8593 12.1C17.5393 12.1 17.9793 11.59 17.9793 10.96V10.67C17.6593 10.69 17.2093 10.72 16.8493 10.77C16.4193 10.83 16.0593 10.98 16.0593 11.42C16.0593 11.81 16.3493 12.1 16.8593 12.1ZM22.602 13.11C21.562 13.11 20.772 12.83 20.172 12.39L20.812 11.47C21.332 11.88 21.992 12.1 22.622 12.1C23.292 12.1 23.672 11.9 23.672 11.52C23.672 11.09 23.182 10.99 22.302 10.83C21.242 10.63 20.392 10.24 20.392 9.2C20.392 8.28 21.122 7.52 22.642 7.52C23.612 7.52 24.312 7.78 24.892 8.19L24.292 9.09C23.772 8.72 23.182 8.53 22.622 8.53C22.022 8.53 21.742 8.77 21.742 9.06C21.742 9.46 22.132 9.55 23.042 9.72C24.032 9.91 25.012 10.23 25.012 11.34C25.012 12.39 24.142 13.11 22.602 13.11ZM25.3252 8.61V7.63H26.3352V5.93H27.6752V7.63H28.8952V8.61H27.6752V11.25C27.6752 11.79 27.8352 12.06 28.4952 12.06C28.6452 12.06 28.7852 12.05 28.8952 12.03V13.01C28.6652 13.07 28.3452 13.11 28.0052 13.11C26.8552 13.11 26.3352 12.54 26.3352 11.54V8.61H25.3252ZM41.0123 5.32H42.4523L40.2523 13H38.6823L37.1123 7.32H37.0923L35.5223 13H33.9323L31.7223 5.32H33.2123L34.7923 11.25H34.8123L36.3523 5.32H37.9023L39.4423 11.22H39.4623L41.0123 5.32ZM43.1915 6.55V5.32H44.6015V6.55H43.1915ZM44.5715 13H43.2215V7.63H44.5715V13ZM45.9754 13V7.63H47.2454L47.2754 8.39H47.2954C47.6254 7.85 48.2054 7.52 48.9354 7.52C50.0654 7.52 50.7954 8.26 50.7954 9.37V13H49.4454V9.57C49.4454 9.02 49.1154 8.58 48.4854 8.58C47.7654 8.58 47.3254 9.09 47.3254 9.77V13H45.9754ZM57.0566 7.63V12.34C57.0566 14.1 55.8866 14.94 54.1366 14.94C53.2566 14.94 52.5866 14.72 52.1066 14.45L52.5466 13.47C52.9466 13.71 53.4366 13.93 54.1066 13.93C55.0166 13.93 55.7166 13.51 55.7166 12.38V12.01H55.6966C55.3166 12.55 54.7366 12.86 54.0166 12.86C52.6566 12.86 51.7866 11.73 51.7866 10.24C51.7866 8.75 52.6666 7.52 54.0966 7.52C54.8366 7.52 55.3966 7.86 55.7866 8.4H55.8066L55.8466 7.63H57.0566ZM54.4566 11.84C55.2966 11.84 55.7566 11.12 55.7566 10.19C55.7566 9.26 55.2866 8.56 54.4566 8.56C53.5866 8.56 53.1566 9.3 53.1566 10.21C53.1566 11.08 53.5666 11.84 54.4566 11.84Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
y={641}
|
||||
x={1067}
|
||||
width="71"
|
||||
height="18"
|
||||
viewBox="0 0 71 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="71" height="18" rx="9" fill="#0D1922" fillOpacity="0.4" />
|
||||
<path
|
||||
d="M17.36 5.32H18.8L16.6 13H15.03L13.46 7.32H13.44L11.87 13H10.28L8.07 5.32H9.56L11.14 11.25H11.16L12.7 5.32H14.25L15.79 11.22H15.81L17.36 5.32ZM20.1695 9.84H22.5995C22.5395 9.08 22.2095 8.55 21.4195 8.55C20.6395 8.55 20.2495 9.07 20.1695 9.84ZM22.8895 11.43L23.7495 12.19C23.2695 12.76 22.5795 13.11 21.5695 13.11C19.7495 13.11 18.7895 11.99 18.7895 10.32C18.7895 8.7 19.7395 7.52 21.4295 7.52C23.0995 7.52 23.9395 8.67 23.9395 10.15C23.9395 10.35 23.9295 10.6 23.8995 10.75H20.1695C20.2695 11.57 20.7095 12.08 21.5995 12.08C22.1195 12.08 22.5595 11.87 22.8895 11.43ZM26.8891 13.11C25.8491 13.11 25.0591 12.83 24.4591 12.39L25.0991 11.47C25.6191 11.88 26.2791 12.1 26.9091 12.1C27.5791 12.1 27.9591 11.9 27.9591 11.52C27.9591 11.09 27.4691 10.99 26.5891 10.83C25.5291 10.63 24.6791 10.24 24.6791 9.2C24.6791 8.28 25.4091 7.52 26.9291 7.52C27.8991 7.52 28.5991 7.78 29.1791 8.19L28.5791 9.09C28.0591 8.72 27.4691 8.53 26.9091 8.53C26.3091 8.53 26.0291 8.77 26.0291 9.06C26.0291 9.46 26.4191 9.55 27.3291 9.72C28.3191 9.91 29.2991 10.23 29.2991 11.34C29.2991 12.39 28.4291 13.11 26.8891 13.11ZM29.6123 8.61V7.63H30.6223V5.93H31.9623V7.63H33.1823V8.61H31.9623V11.25C31.9623 11.79 32.1223 12.06 32.7823 12.06C32.9323 12.06 33.0723 12.05 33.1823 12.03V13.01C32.9523 13.07 32.6323 13.11 32.2923 13.11C31.1423 13.11 30.6223 12.54 30.6223 11.54V8.61H29.6123ZM45.2995 5.32H46.7395L44.5395 13H42.9695L41.3995 7.32H41.3795L39.8095 13H38.2195L36.0095 5.32H37.4995L39.0795 11.25H39.0995L40.6395 5.32H42.1895L43.7295 11.22H43.7495L45.2995 5.32ZM47.4786 6.55V5.32H48.8886V6.55H47.4786ZM48.8586 13H47.5086V7.63H48.8586V13ZM50.2625 13V7.63H51.5325L51.5625 8.39H51.5825C51.9125 7.85 52.4925 7.52 53.2225 7.52C54.3525 7.52 55.0825 8.26 55.0825 9.37V13H53.7325V9.57C53.7325 9.02 53.4025 8.58 52.7725 8.58C52.0525 8.58 51.6125 9.09 51.6125 9.77V13H50.2625ZM61.3437 7.63V12.34C61.3437 14.1 60.1737 14.94 58.4237 14.94C57.5437 14.94 56.8737 14.72 56.3937 14.45L56.8337 13.47C57.2337 13.71 57.7237 13.93 58.3937 13.93C59.3037 13.93 60.0037 13.51 60.0037 12.38V12.01H59.9837C59.6037 12.55 59.0237 12.86 58.3037 12.86C56.9437 12.86 56.0737 11.73 56.0737 10.24C56.0737 8.75 56.9537 7.52 58.3837 7.52C59.1237 7.52 59.6837 7.86 60.0737 8.4H60.0937L60.1337 7.63H61.3437ZM58.7437 11.84C59.5837 11.84 60.0437 11.12 60.0437 10.19C60.0437 9.26 59.5737 8.56 58.7437 8.56C57.8737 8.56 57.4437 9.3 57.4437 10.21C57.4437 11.08 57.8537 11.84 58.7437 11.84Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WingSignatures;
|
||||
@@ -0,0 +1,44 @@
|
||||
interface ISkygardenDescriptionProps {
|
||||
isLeft: boolean;
|
||||
}
|
||||
|
||||
const SkygardenDescription = ({ isLeft }: ISkygardenDescriptionProps) => {
|
||||
return (
|
||||
<div className=" p-6">
|
||||
<div
|
||||
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px] desc-shadow`}
|
||||
>
|
||||
<div className="relative ">
|
||||
<div className="flex justify-between border-b pb-4">
|
||||
<p
|
||||
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out `}
|
||||
>
|
||||
Sky Garden
|
||||
</p>
|
||||
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
|
||||
17 amenities
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<div className="flex items-center justify-between gap-[178px]">
|
||||
<p className="text-s text-[#73787C] w-full">Indoor</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">3 amenities</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-s text-[#73787C]">Outdoor </p>
|
||||
|
||||
<p className="text-s text-[#0D1922] text-nowrap">14 amenities</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white absolute top-0 ${
|
||||
isLeft ? "-right-[35px] rotate-90" : "-left-[35px] -rotate-90"
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SkygardenDescription;
|
||||
@@ -0,0 +1,26 @@
|
||||
interface ActivityCardProps {
|
||||
icon?: React.ReactNode;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const ActivityCard = ({ icon, title }: ActivityCardProps) => {
|
||||
return (
|
||||
// <div className="bg-white rounded-2xl flex flex-col gap-9 p-3">
|
||||
// <div className="flex gap-2 items-center">
|
||||
// <div className="w-3 h-3 bg-[#E2E2DC] rounded-full"></div>
|
||||
// <p className="text-m text-[#0D1922]">{title}</p>
|
||||
// </div>
|
||||
// <div className="w-14 h-14 rounded-lg bg-[#F3F3F2] self-end text-[#00BED7]">
|
||||
// {icon}
|
||||
// </div>
|
||||
// </div>
|
||||
<div className="space-y-3">
|
||||
<div className="w-10 h-10 rounded-full text-[#00BED7] overflow-hidden border border-[#00BED7]">
|
||||
{icon}
|
||||
</div>
|
||||
<p className="text-sm font-semibold">{title}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityCard;
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useState } from "react";
|
||||
// import { useSwipeable } from "react-swipeable";
|
||||
import SkygardenIndoorLayout from "./SkygardenIndoorLayout";
|
||||
import { ISwitchLabel } from "../../../types/switchLabel";
|
||||
import SwitchToggle from "../../SwitchToggle";
|
||||
import SkygardenOutdoorLayout from "./SkygardenOutdoorLayout";
|
||||
|
||||
const skygardenLayouts: ISwitchLabel[] = [
|
||||
{ id: "1", label: "Indoor" },
|
||||
{ id: "2", label: "Outdoor" },
|
||||
];
|
||||
|
||||
const LayoutSlider = () => {
|
||||
const [currentLabel, setCurrentLabel] = useState<ISwitchLabel>(
|
||||
skygardenLayouts[0]
|
||||
);
|
||||
|
||||
const handleOnSwitchClick = (label: ISwitchLabel) => {
|
||||
setCurrentLabel(label);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center p-10">
|
||||
<div className="flex w-full overflow-x-hidden max-w-[1100px] mx-auto overflow-hidden select-none">
|
||||
<div
|
||||
className="flex w-full transition-all duration-300"
|
||||
style={{
|
||||
transform: `translateX(${
|
||||
0 + (Number(currentLabel.id) - 1) * -100
|
||||
}%)`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`min-w-full flex flex-col transition-all duration-300 items-center`}
|
||||
>
|
||||
<SkygardenIndoorLayout />
|
||||
</div>
|
||||
<div
|
||||
className={`min-w-full flex flex-col transition-all duration-300 items-center`}
|
||||
>
|
||||
<SkygardenOutdoorLayout />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SwitchToggle
|
||||
labels={skygardenLayouts}
|
||||
currentLabel={currentLabel}
|
||||
onClick={handleOnSwitchClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LayoutSlider;
|
||||
@@ -0,0 +1,80 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import ArrowLeftIcon from "../../icons/ArrowLeftIcon";
|
||||
import ArrowRightIcon from "../../icons/ArrowRightIcon";
|
||||
|
||||
const images = [
|
||||
"/images/skyGardenSlider/1.jpg",
|
||||
"/images/skyGardenSlider/2.jpg",
|
||||
"/images/skyGardenSlider/3.jpg",
|
||||
"/images/skyGardenSlider/4.jpg",
|
||||
];
|
||||
|
||||
function SkyGardenSlider() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [currentSlideIndex, setCurrentSlideIndex] = useState<number>(0);
|
||||
const [isShowNextButton, setIsShowNextButton] = useState(true);
|
||||
const [isShowPrevButton, setIsShowPrevButton] = useState(false);
|
||||
|
||||
function next() {
|
||||
if (currentSlideIndex < 3) {
|
||||
setCurrentSlideIndex((prev) => prev + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function prev() {
|
||||
if (currentSlideIndex > 0) {
|
||||
setCurrentSlideIndex((prev) => prev - 1);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (currentSlideIndex === 0) {
|
||||
setIsShowPrevButton(false);
|
||||
} else if (currentSlideIndex === images.length - 1) {
|
||||
setIsShowNextButton(false);
|
||||
} else {
|
||||
setIsShowPrevButton(true);
|
||||
setIsShowNextButton(true);
|
||||
}
|
||||
}, [currentSlideIndex]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative py-8 overflow-x-clip">
|
||||
{ref.current?.clientWidth && (
|
||||
<div
|
||||
className="flex gap-4 px-6 transition-transform duration-300"
|
||||
style={{
|
||||
transform: `translateX(calc(-${
|
||||
ref.current.clientWidth * currentSlideIndex
|
||||
}px + ${currentSlideIndex * 32}px))`,
|
||||
}}
|
||||
>
|
||||
{images.map((image) => (
|
||||
<img src={image} alt="" className="rounded-2xl" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute top-0 w-full h-full flex items-center justify-between px-4">
|
||||
<button
|
||||
className={`p-2.5 bg-[#FFFFFFCC] hover:bg-white hover:text-[#0D1922] rounded-full transition-all ${
|
||||
isShowPrevButton ? "opacity-100" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
onClick={prev}
|
||||
>
|
||||
<ArrowLeftIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
className={`p-2.5 bg-[#FFFFFFCC] hover:bg-white hover:text-[#0D1922] rounded-full transition-all ${
|
||||
isShowNextButton ? "opacity-100" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
onClick={next}
|
||||
>
|
||||
<ArrowRightIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkyGardenSlider;
|
||||
@@ -0,0 +1,12 @@
|
||||
function SkygardenIndoorLayout() {
|
||||
return (
|
||||
<img
|
||||
src="/images/skyGarden/skyGardenIndoor.jpg"
|
||||
alt=""
|
||||
width={672}
|
||||
height={544}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkygardenIndoorLayout;
|
||||
@@ -0,0 +1,12 @@
|
||||
const SkygardenOutdoorLayout = () => {
|
||||
return (
|
||||
<img
|
||||
src="/images/skyGarden/skyGardenOutdoor.jpg"
|
||||
width={672}
|
||||
height={544}
|
||||
alt=""
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SkygardenOutdoorLayout;
|
||||
@@ -0,0 +1,144 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import AmphitheatreIcon from "../../icons/activities/AmphitheatreIcon";
|
||||
import BoulderingWallIcon from "../../icons/activities/BoulderingWallIcon";
|
||||
import ChangingRoomsIcon from "../../icons/activities/ChangingRoomsIcon";
|
||||
import ChessTablesIcon from "../../icons/activities/ChessTablesIcon";
|
||||
import ClimbingRoomIcon from "../../icons/activities/ClimbingRoomIcon";
|
||||
import CommunalDiningTablesIcon from "../../icons/activities/CommunalDiningTablesIcon";
|
||||
import IndoorLapPoolIcon from "../../icons/activities/IndoorLapPoolIcon";
|
||||
import LushLandscapeIcon from "../../icons/activities/LushLandscapeIcon";
|
||||
import MultiPurposeCourtIcon from "../../icons/activities/MultiPurposeCourtIcon";
|
||||
import OutdoorCinemaIcon from "../../icons/activities/OutdoorCinemaIcon";
|
||||
import OutdoorCoworkingSpaceIcon from "../../icons/activities/OutdoorCoworkingSpaceIcon";
|
||||
import PadelPongIcon from "../../icons/activities/PadelPongIcon";
|
||||
import PingPongInATableIcon from "../../icons/activities/PingPongInATableIcon";
|
||||
import RunningWheelIcon from "../../icons/activities/RunningWheelIcon";
|
||||
import SunLoungingDeckIcon from "../../icons/activities/SunLoungingDeckIcon";
|
||||
import SuspendedLoungingNetsIcon from "../../icons/activities/SuspendedLoungingNetsIcon";
|
||||
import WellnessFeaturesIcon from "../../icons/activities/WellnessFeaturesIcon";
|
||||
import ActivityCard from "./ActivityCard";
|
||||
import LayoutSlider from "./LayoutSlider";
|
||||
import Button from "../../Button";
|
||||
import VideoIcon from "../../icons/VideoIcon";
|
||||
import useModal from "../../../store/useModal";
|
||||
import VirtualTourVideoModal from "../../modals/VirtualTourVideoModal";
|
||||
import CloseIcon from "../../icons/CloseIcon";
|
||||
import SkyGardenSlider from "./SkyGardenSlider";
|
||||
|
||||
interface ISkygardenSidebarProps {
|
||||
onMouseEnter: () => void;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const SkygardenSidebar = ({
|
||||
onMouseEnter,
|
||||
onClick,
|
||||
}: ISkygardenSidebarProps) => {
|
||||
const { setModal } = useModal();
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] flex flex-col top-[58px] space-y-6 overflow-y-scroll"
|
||||
onMouseOver={onMouseEnter}
|
||||
>
|
||||
<div className="px-6 pt-6 flex justify-between">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-2xl text-[#0D1922] font-semibold">Sky Garden</p>
|
||||
<p className="text-s text-[#73787C]">22-23 floor</p>
|
||||
</div>
|
||||
<Button
|
||||
buttonType="cta"
|
||||
icon={<CloseIcon className="w-5 h-5" />}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-6 space-y-8">
|
||||
<div className="relative bg-white font-semibold text-caption-m rounded-2xl justify-center items-center flex flex-col gap-1">
|
||||
<LayoutSlider />
|
||||
<Button
|
||||
buttonType="secondary"
|
||||
icon={<VideoIcon />}
|
||||
text="Play video"
|
||||
className="absolute top-6 right-6 px-3.5 py-2.5 font-normal"
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<VirtualTourVideoModal videoHref="/videos/SkyGarden.mp4" />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<p className="text-xl text-[#0D1922] font-semibold">
|
||||
Indoor Amenities
|
||||
</p>
|
||||
<div className="grid grid-cols-4 gap-4 pb-6 border-b border-[#E2E2DC]">
|
||||
<ActivityCard
|
||||
title={"Indoor Lap Pool"}
|
||||
icon={<IndoorLapPoolIcon />}
|
||||
/>
|
||||
<ActivityCard
|
||||
title={"Wellness Features"}
|
||||
icon={<WellnessFeaturesIcon />}
|
||||
/>
|
||||
<ActivityCard
|
||||
title={"Changing Rooms"}
|
||||
icon={<ChangingRoomsIcon />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<p className="text-xl text-[#0D1922] font-semibold">
|
||||
Outdoor Amenities
|
||||
</p>
|
||||
<div className="grid grid-cols-4 gap-x-4 gap-y-6">
|
||||
<ActivityCard title={"Padel Pong"} icon={<PadelPongIcon />} />
|
||||
<ActivityCard
|
||||
title={"Sun Lounging Deck"}
|
||||
icon={<SunLoungingDeckIcon />}
|
||||
/>
|
||||
<ActivityCard
|
||||
title={"Outdoor Cinema"}
|
||||
icon={<OutdoorCinemaIcon />}
|
||||
/>
|
||||
<ActivityCard
|
||||
title={"Bouldering Wall"}
|
||||
icon={<BoulderingWallIcon />}
|
||||
/>
|
||||
<ActivityCard
|
||||
title={"Ping Pong in a Tube"}
|
||||
icon={<PingPongInATableIcon />}
|
||||
/>
|
||||
<ActivityCard title={"Amphitheatre"} icon={<AmphitheatreIcon />} />
|
||||
<ActivityCard
|
||||
title={"Communal Dining Tables"}
|
||||
icon={<CommunalDiningTablesIcon />}
|
||||
/>
|
||||
<ActivityCard
|
||||
title={"Suspended Lounging Nets "}
|
||||
icon={<SuspendedLoungingNetsIcon />}
|
||||
/>
|
||||
<ActivityCard
|
||||
title={"Lush Landscape"}
|
||||
icon={<LushLandscapeIcon />}
|
||||
/>
|
||||
<ActivityCard title={"Running Wheel"} icon={<RunningWheelIcon />} />
|
||||
<ActivityCard title={"Chess Tables"} icon={<ChessTablesIcon />} />
|
||||
<ActivityCard title={"Climbing Wall"} icon={<ClimbingRoomIcon />} />
|
||||
<ActivityCard
|
||||
title={"Outdoor Coworking Space"}
|
||||
icon={<OutdoorCoworkingSpaceIcon />}
|
||||
/>
|
||||
<ActivityCard
|
||||
title={"Multi-purpose Court"}
|
||||
icon={<MultiPurposeCourtIcon />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <ZoneSlider /> */}
|
||||
</div>
|
||||
<SkyGardenSlider />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SkygardenSidebar;
|
||||
@@ -0,0 +1,112 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
import { Image } from "../../../types/image";
|
||||
import { useLayoutEffect, useRef, useState } from "react";
|
||||
import Button from "../../Button";
|
||||
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
|
||||
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
const images: Image[] = [
|
||||
{ id: "1", src: "/images/skyGardenSlider/1.jpg" },
|
||||
{ id: "2", src: "/images/skyGardenSlider/2.jpg" },
|
||||
{ id: "3", src: "/images/skyGardenSlider/3.jpg" },
|
||||
{ id: "4", src: "/images/skyGardenSlider/4.jpg" },
|
||||
];
|
||||
|
||||
const getGapOffset = (screenWidth: number) => {
|
||||
if (screenWidth > 1600) return 16;
|
||||
if (screenWidth > 1280) return 24;
|
||||
if (screenWidth > 640) return 16;
|
||||
return 16;
|
||||
};
|
||||
|
||||
const ZoneSlider = () => {
|
||||
const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
|
||||
const [rightImageOffset, setRightImageOffset] = useState("");
|
||||
const [imageWidth, setImageWidth] = useState(0);
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!imageRef.current?.src) return;
|
||||
const width = imageRef.current.width;
|
||||
setImageWidth(width);
|
||||
}, [imageRef.current, window.innerWidth]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const screenWidth = window.innerWidth;
|
||||
const gapOffset = getGapOffset(screenWidth);
|
||||
|
||||
const _rightImageOffset = `${
|
||||
-24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
|
||||
}px`;
|
||||
|
||||
setRightImageOffset(_rightImageOffset);
|
||||
}, [imageWidth, selectedImageIndex, window.innerWidth]);
|
||||
|
||||
const handlers = useSwipeable({
|
||||
onSwipedLeft: next,
|
||||
onSwipedRight: prev,
|
||||
trackMouse: true,
|
||||
});
|
||||
|
||||
function next() {
|
||||
const lastIndex = isMobile ? images.length - 2 : images.length - 3;
|
||||
|
||||
if (selectedImageIndex === lastIndex + 1) return;
|
||||
setSelectedImageIndex((prev) => prev + 1);
|
||||
}
|
||||
|
||||
function prev() {
|
||||
if (selectedImageIndex === -1) return;
|
||||
setSelectedImageIndex((prev) => prev - 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 " {...handlers}>
|
||||
<div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] ">
|
||||
<div
|
||||
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
|
||||
style={{
|
||||
right: `${rightImageOffset}`,
|
||||
}}
|
||||
>
|
||||
{images.map((image) => (
|
||||
<img
|
||||
key={image.id}
|
||||
ref={imageRef}
|
||||
src={image.src}
|
||||
alt=""
|
||||
// className="rounded-2xl sm:aspect-[6.6/3.7] object-cover pointer-events-none select-none"
|
||||
className="rounded-2xl pointer-events-none select-none"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
onClick={prev}
|
||||
icon={<LeftArrowSliderIcon />}
|
||||
className="absolute text-[#73787C] top-[calc(50%-22px)] left-8 hidden sm:block"
|
||||
/>
|
||||
<Button
|
||||
onClick={next}
|
||||
icon={<RightArrowSliderIcon />}
|
||||
className="absolute text-[#73787C] top-[calc(50%-22px)] right-8 hidden sm:block"
|
||||
/>
|
||||
</div>
|
||||
<div className="self-center gap-1 sm:hidden flex">
|
||||
{images.map((image, index) => (
|
||||
<div
|
||||
key={image.id}
|
||||
className={`transition-all duration-300 ease-in-out rounded-full h-2 ${
|
||||
index - 1 === selectedImageIndex
|
||||
? "w-6 bg-[#0D1922]"
|
||||
: "w-2 bg-[#0D192266]"
|
||||
}`}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZoneSlider;
|
||||
Reference in New Issue
Block a user