upd
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
interface Props {
|
||||
variant?: "primary" | "secondary";
|
||||
size?: "large" | "medium" | "small";
|
||||
roundedFull?: boolean;
|
||||
icon?: JSX.Element;
|
||||
onlyIcon?: boolean;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const variantClasses = {
|
||||
primary: "bg-[#00BED7] text-white hover:bg-[#0AB3C9]",
|
||||
secondary: "bg-white hover:text-[#0D1922]",
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
large: "px-4 py-3 gap-2 text-base",
|
||||
medium: "px-3.5 py-2.5 gap-1 text-sm",
|
||||
small: "px-3 py-2.5 gap-1 text-xs",
|
||||
};
|
||||
|
||||
const onlyIconSizeClasses = {
|
||||
large: "p-3",
|
||||
medium: "p-2.5",
|
||||
small: "p-2.5",
|
||||
};
|
||||
|
||||
function Button3({
|
||||
variant = "primary",
|
||||
size = "medium",
|
||||
roundedFull = false,
|
||||
icon,
|
||||
onlyIcon = false,
|
||||
children,
|
||||
className,
|
||||
onClick,
|
||||
}: Props) {
|
||||
return (
|
||||
<button
|
||||
className={`flex items-center justify-center transition-colors w-fit outline-none ${
|
||||
variantClasses[variant]
|
||||
} ${onlyIcon ? onlyIconSizeClasses[size] : sizeClasses[size]} ${
|
||||
roundedFull ? "rounded-full" : "rounded-lg"
|
||||
} ${className}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon}
|
||||
<span className="h-[18px]">{children}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Button3;
|
||||
@@ -0,0 +1,14 @@
|
||||
import { SVGProps } from "react";
|
||||
|
||||
function FloorPath(props: SVGProps<SVGPathElement> & { selected: boolean }) {
|
||||
return (
|
||||
<path
|
||||
{...props}
|
||||
className={` hover:fill-[#00bed7]/50 transition-[fill] cursor-pointer ${
|
||||
props.selected ? "fill-[#00bed7]/50" : "fill-[#00bed7]/25"
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorPath;
|
||||
@@ -1,4 +1,8 @@
|
||||
const InfoIcon = () => {
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const InfoIcon = ({ className }: Props) => {
|
||||
return (
|
||||
<svg
|
||||
width={20}
|
||||
@@ -6,24 +10,22 @@ const InfoIcon = () => {
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
d="M17.5832 9.99984C17.5832 10.9957 17.387 11.9818 17.0059 12.9019C16.6248 13.8219 16.0662 14.6579 15.3621 15.3621C14.6579 16.0662 13.8219 16.6248 12.9019 17.0059C11.9818 17.387 10.9957 17.5832 9.99984 17.5832C9.00398 17.5832 8.01787 17.387 7.09782 17.0059C6.17777 16.6248 5.34179 16.0662 4.63761 15.3621C3.93343 14.6579 3.37485 13.8219 2.99375 12.9019C2.61265 11.9818 2.4165 10.9957 2.4165 9.99984C2.4165 9.00398 2.61265 8.01787 2.99375 7.09782C3.37485 6.17777 3.93343 5.34179 4.63761 4.63761C5.34179 3.93343 6.17777 3.37485 7.09782 2.99375C8.01787 2.61265 9.00398 2.4165 9.99984 2.4165C10.9957 2.4165 11.9818 2.61265 12.9019 2.99375C13.8219 3.37485 14.6579 3.93343 15.3621 4.63761C16.0662 5.34179 16.6248 6.17777 17.0059 7.09782C17.387 8.01788 17.5832 9.00398 17.5832 9.99984L17.5832 9.99984Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 3.86364C9.19416 3.86364 8.39621 4.02236 7.65172 4.33074C6.90722 4.63912 6.23075 5.09112 5.66094 5.66094C5.09112 6.23075 4.63912 6.90722 4.33074 7.65171C4.02236 8.39621 3.86364 9.19416 3.86364 10C3.86364 10.8058 4.02236 11.6038 4.33074 12.3483C4.63912 13.0928 5.09112 13.7692 5.66094 14.3391C6.23075 14.9089 6.90722 15.3609 7.65171 15.6693C8.39621 15.9776 9.19416 16.1364 10 16.1364C10.8058 16.1364 11.6038 15.9776 12.3483 15.6693C13.0928 15.3609 13.7693 14.9089 14.3391 14.3391C14.9089 13.7693 15.3609 13.0928 15.6693 12.3483C15.9776 11.6038 16.1364 10.8058 16.1364 10C16.1364 9.19416 15.9776 8.39621 15.6693 7.65172C15.3609 6.90722 14.9089 6.23075 14.3391 5.66094C13.7693 5.09112 13.0928 4.63912 12.3483 4.33074C11.6038 4.02236 10.8058 3.86364 10 3.86364ZM7.12988 3.0709C8.03982 2.69399 9.01509 2.5 10 2.5C10.9849 2.5 11.9602 2.69399 12.8701 3.0709C13.7801 3.44781 14.6069 4.00026 15.3033 4.6967C15.9997 5.39314 16.5522 6.21993 16.9291 7.12988C17.306 8.03982 17.5 9.01509 17.5 10C17.5 10.9849 17.306 11.9602 16.9291 12.8701C16.5522 13.7801 15.9997 14.6069 15.3033 15.3033C14.6069 15.9997 13.7801 16.5522 12.8701 16.9291C11.9602 17.306 10.9849 17.5 10 17.5C9.01509 17.5 8.03982 17.306 7.12987 16.9291C6.21993 16.5522 5.39314 15.9997 4.6967 15.3033C4.00026 14.6069 3.44781 13.7801 3.0709 12.8701C2.69399 11.9602 2.5 10.9849 2.5 10C2.5 9.01509 2.69399 8.03982 3.0709 7.12987C3.44781 6.21993 4.00026 5.39314 4.6967 4.6967C5.39314 4.00026 6.21993 3.44781 7.12988 3.0709Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M10 14.1665V9.1665"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 14.0909C10.3766 14.0909 10.6818 13.7856 10.6818 13.4091V9.31818C10.6818 8.94162 10.3766 8.63636 10 8.63636C9.62344 8.63636 9.31818 8.94162 9.31818 9.31818V13.4091C9.31818 13.7856 9.62344 14.0909 10 14.0909Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<ellipse
|
||||
cx={0.833333}
|
||||
cy={0.833333}
|
||||
rx={0.833333}
|
||||
ry={0.833333}
|
||||
transform="matrix(1 0 0 -1 9.1665 6.6665)"
|
||||
<path
|
||||
d="M10.6818 6.59091C10.6818 6.21435 10.3766 5.90909 10 5.90909C9.62344 5.90909 9.31818 6.21435 9.31818 6.59091C9.31818 6.96747 9.62344 7.27273 10 7.27273C10.3766 7.27273 10.6818 6.96747 10.6818 6.59091Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@@ -12,7 +12,7 @@ function NavbarModal() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="fixed top-[56px] left-0 w-full h-[calc(100vh-56px)] bg-[#F3F3F2] z-50 sm:p-4 p-3 space-y-4 overflow-y-auto">
|
||||
<div className="fixed top-[56px] left-0 w-full h-[calc(100vh-56px)] bg-[#F3F3F2] z-[99999999] sm:p-4 p-3 space-y-4 overflow-y-auto">
|
||||
<div className="grid sm:grid-cols-2 gap-2 border-b border-[#E2E2DC] pb-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<a
|
||||
|
||||
@@ -0,0 +1,262 @@
|
||||
[
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "5",
|
||||
"d": "M2442.66,2585.29c1.99-.25,3.48-1.95,3.48-3.96v-24.64c0-2.41-2.1-4.27-4.48-3.98l-139.39,16.95c-.83.1-1.68-.06-2.41-.47l-23.48-12.94c-.32-.18-.67-.31-1.03-.4l-248.56-57.83c-.26-.05-.52-.09-.78-.1l-58.52-1.85c-2.26-.08-4.13,1.74-4.13,3.99v23.3c0,2.13,1.69,3.89,3.82,3.99l58.85,2.71c.25.01.5.05.74.1l248.57,59.2c.37.08.72.22,1.04.4l23.45,13.26c.75.42,1.62.59,2.48.48l140.35-18.21Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "6",
|
||||
"d": "M2442.6,2547.99c2.02-.24,3.54-1.94,3.54-3.97v-24.66c0-2.38-2.06-4.23-4.43-3.98l-139.52,15.14c-.78.09-1.57-.06-2.27-.43l-23.56-12.23c-.31-.17-.64-.29-.99-.36l-248.64-54.16c-.22-.05-.44-.08-.66-.09l-58.52-2.78c-2.28-.11-4.19,1.71-4.19,3.99v23.29c0,2.11,1.65,3.86,3.76,3.99l58.97,3.65c.21.01.42.04.62.09l248.65,55.52c.35.08.69.21,1.01.38l23.52,12.54c.71.38,1.53.53,2.34.44l140.37-16.37Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "7",
|
||||
"d": "M2442.61,2509.46c2.01-.23,3.53-1.94,3.53-3.97v-25.62c0-2.39-2.08-4.25-4.46-3.98l-139.54,16.2c-.75.09-1.51-.04-2.2-.37l-23.6-11.42c-.3-.14-.61-.25-.93-.31l-248.7-51.58c-.2-.04-.41-.07-.62-.08l-58.54-2.79c-2.28-.1-4.19,1.72-4.19,4v23.28c0,2.12,1.65,3.87,3.76,4l58.99,3.65c.19.01.39.04.58.08l248.71,52.94c.33.07.64.18.95.33l23.57,11.73c.7.34,1.48.48,2.25.39l140.44-16.48Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "8",
|
||||
"d": "M2442.58,2471.1c2.03-.23,3.56-1.94,3.56-3.98v-24.66c0-2.37-2.05-4.22-4.41-3.98l-139.68,14.39c-.7.07-1.4-.04-2.03-.32l-23.72-10.53c-.27-.12-.56-.21-.85-.27l-248.76-48.99c-.19-.04-.39-.07-.58-.08l-58.56-2.78c-2.28-.11-4.19,1.71-4.19,3.99v23.29c0,2.11,1.65,3.86,3.76,3.99l59.28,3.67,249.04,50.42c.3.06.59.15.87.28l23.67,10.83c.66.3,1.39.42,2.11.34l140.49-15.61Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "9",
|
||||
"d": "M2442.53,2433.51c2.05-.2,3.61-1.92,3.61-3.98v-25.64c0-2.36-2.03-4.21-4.38-3.98l-139.79,13.53c-.64.06-1.29-.03-1.9-.28l-23.8-9.71c-.25-.1-.51-.18-.78-.23l-248.75-46.5c-.23-.04-.45-.07-.68-.07l-58.63-.93c-2.24-.03-4.07,1.77-4.07,4v23.3c0,2.16,1.72,3.93,3.88,3.99l58.84,1.78c.22,0,.43.03.64.07l248.76,47.86c.27.06.54.14.8.25l23.77,10.02c.62.26,1.29.36,1.95.3l140.53-13.78Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "10",
|
||||
"d": "M2442.51,2395.48c2.06-.19,3.63-1.92,3.63-3.99v-25.64c0-2.35-2.02-4.2-4.36-3.98l-139.89,12.67c-.59.05-1.19-.03-1.75-.24l-23.91-8.89c-.22-.09-.46-.15-.7-.19l-248.81-43.83c-.21-.03-.42-.05-.63-.06l-58.66-.93c-2.24-.03-4.07,1.77-4.07,4v23.3c0,2.16,1.72,3.93,3.88,4l58.86,1.77c.2.01.4.03.6.06l248.82,45.19c.25.04.49.11.73.2l23.87,9.21c.57.23,1.19.31,1.8.26l140.59-12.91Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "11",
|
||||
"d": "M2442.46,2357.84c2.08-.16,3.68-1.9,3.68-3.98v-25.66c0-2.33-1.99-4.17-4.31-3.99l-139.95,10.95c-.59.04-1.18-.04-1.72-.25l-23.89-8.98c-.25-.1-.51-.17-.78-.21l-249.09-39.27-58.97-.94c-2.24-.03-4.07,1.77-4.07,4v23.3c0,2.16,1.72,3.93,3.88,3.99l59.16,1.79,249.08,40.64c.27.04.54.12.81.22l23.84,9.29c.57.22,1.17.31,1.77.27l140.56-11.17Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "12",
|
||||
"d": "M2442.46,2319.12c2.08-.17,3.68-1.9,3.68-3.99v-25.65c0-2.33-1.99-4.17-4.31-3.99l-140.02,11.05c-.54.04-1.09-.03-1.6-.2l-23.98-8.16c-.22-.08-.46-.14-.69-.17l-249.14-37.69-58.97-.93c-2.24-.04-4.07,1.76-4.07,4v23.29c0,2.17,1.72,3.94,3.88,4l59.16,1.78,249.13,39.05c.24.04.48.1.71.18l23.94,8.48c.53.19,1.1.26,1.66.22l140.62-11.27Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "13",
|
||||
"d": "M2442.46,2280.8c2.08-.17,3.68-1.9,3.68-3.99v-25.65c0-2.33-1.99-4.17-4.31-3.99l-140.02,11.04c-.54.05-1.09-.02-1.6-.2l-23.95-8.15c-.25-.08-.5-.14-.75-.17l-249.11-34.09-58.97-.93c-2.24-.04-4.07,1.76-4.07,4v23.23c0,2.19,1.76,3.97,3.95,4l59.09.84,249.11,36.45c.25.04.51.1.75.19l23.92,8.47c.53.18,1.1.26,1.66.21l140.62-11.26Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "14",
|
||||
"d": "M2442.44,2242.26c2.08-.16,3.7-1.9,3.7-3.99v-25.66c0-2.32-1.97-4.16-4.29-3.99l-140.11,10.18c-.5.04-1-.02-1.47-.17l-24.04-7.41c-.22-.07-.46-.12-.69-.14l-249.14-30.4-58.97-.93c-2.24-.04-4.07,1.76-4.07,4v23.17c0,2.21,1.8,4,4,4h59.04l249.14,33.66c.23.03.47.08.69.16l24.02,7.73c.49.16,1,.22,1.52.18l140.67-10.39Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "15",
|
||||
"d": "M2442.41,2203.74c2.1-.15,3.73-1.89,3.73-3.99v-24.69c0-2.31-1.94-4.13-4.24-4l-140.26,8.46c-.43.02-.86-.02-1.28-.13l-24.18-6.5c-.19-.05-.39-.08-.58-.11l-249.2-28.8h-59.04c-2.2,0-4,1.79-4,4v23.24c0,2.21,1.8,4,4,4h59.04l249.19,31.07c.2.02.4.06.59.12l24.14,6.81c.44.12.9.17,1.36.14l140.73-9.62Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "16",
|
||||
"d": "M2442.39,2165.79c2.11-.13,3.75-1.88,3.75-3.99v-24.69c0-2.3-1.92-4.12-4.22-4l-140.36,7.59c-.38.02-.76-.01-1.13-.1l-24.54-5.71-249.49-26.26h-59.04c-2.2,0-4,1.79-4,4v23.24c0,2.21,1.8,4,4,4h59.04l249.49,28.53,24.5,6.04c.4.09.8.13,1.21.11l140.79-8.76Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "17",
|
||||
"d": "M2442.36,2127.73c2.12-.12,3.78-1.87,3.78-3.99v-24.7c0-2.28-1.91-4.1-4.19-3.99l-140.4,6.71c-.37.02-.75-.01-1.11-.1l-24.55-5.81-249.49-23.03h-59.04c-2.2,0-4,1.79-4,4v23.24c0,2.21,1.8,4,4,4h59.04l249.2,25.27c.2.02.39.05.57.1l24.23,6.07c.39.09.79.13,1.19.11l140.77-7.88Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "18",
|
||||
"d": "M2442.34,2089.42c2.13-.1,3.8-1.86,3.8-3.99v-24.7c0-2.27-1.89-4.09-4.17-4l-140.51,5.86c-.31.01-.63-.01-.94-.07l-24.63-4.85-249.49-20.44h-59.04c-2.2,0-4,1.79-4,4v23.24c0,2.21,1.8,4,4,4h59.04l249.49,22.71,24.59,5.17c.34.07.68.1,1.03.08l140.83-7.01Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "19",
|
||||
"d": "M2442.29,2052.18c2.15-.08,3.85-1.84,3.85-4v-25.67c0-2.26-1.88-4.08-4.14-4l-140.62,4.99c-.26.01-.52-.01-.78-.05l-24.71-3.97-249.49-17.74h-59.04c-2.2,0-4,1.79-4,4v23.24c0,2.21,1.8,4,4,4h59.04l249.49,20,24.68,4.31c.28.05.56.07.84.06l140.88-5.17Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "20",
|
||||
"d": "M2442.29,2013.26c2.15-.08,3.85-1.84,3.85-3.99v-25.68c0-2.26-1.88-4.08-4.15-3.99l-140.67,5.18c-.22,0-.44-.01-.66-.03l-24.77-3.2-249.49-15.03h-59.04c-2.2,0-4,1.79-4,4v23.24c0,2.21,1.8,4,4,4h59.04l249.49,17.3,24.74,3.53c.24.03.48.05.72.04l140.94-5.37Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "21",
|
||||
"d": "M2442.56,1975.18c2.16-.07,3.87-1.84,3.87-4v-30.11c0-2.24-1.85-4.05-4.09-4l-165.89,3.66-29.94-3.14-219.82-10.49h-59.04c-2.21,0-4,1.79-4,4v27.69c0,2.23,1.83,4.03,4.06,3.99l58.98-.84,249.76,15.42,24.83,2.32,141.28-4.5Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-name": "Sky Garden",
|
||||
"d": "M2450.23,1803.6v55.16c0,2.21,1.79,4,4,4h10.05c2.21,0,4,1.79,4,4v54.89c0,2.18-1.74,3.96-3.92,4l-186.91,3.6-38.36-3.29-271.8-9.8c-2.15-.08-3.85-1.84-3.85-4v-109.83c0-2.21,1.79-4,4-4h59.25l220.63,1.42h53.38l145.49-.15c2.23-.02,4.04,1.78,4.04,4Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "24",
|
||||
"d": "M2442.46,1786.1c2.2-.02,3.97-1.8,3.97-4v-24.83c0-2.2-1.78-3.98-3.97-4l-139.18-.93-27.1.37-249.49,2.31h-59.3c-2.21,0-4,1.79-4,4v23.24c0,2.21,1.79,4,4,4h59.3l249.49-.04,27.1.88,139.18-1Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "25",
|
||||
"d": "M2442.43,1747.73c2.21,0,4-1.79,4-4v-23.86c0-2.17-1.74-3.95-3.92-4l-139.23-2.77-27.1,1.26-249.49,5.02h-59.04c-2.21,0-4,1.79-4,4v23.24c0,2.21,1.79,4,4,4h59.04l249.49-2.75,27.1-.02,139.15-.12Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "26",
|
||||
"d": "M2442.41,1709.54c2.22.01,4.02-1.79,4.02-4v-23.86c0-2.17-1.73-3.94-3.9-4l-139.25-3.65-27.1,2.16-249.49,7.72h-59.04c-2.21,0-4,1.79-4,4v23.24c0,2.21,1.79,4,4,4h59.04l249.49-5.45,27.1-.92,139.13.76Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "27",
|
||||
"d": "M2442.38,1671.32c2.23.02,4.05-1.77,4.05-4v-23.85c0-2.16-1.71-3.93-3.87-4l-138.99-4.52c-.2-.01-.39,0-.58.02l-26.81,3.03-249.49,10.42h-59.04c-2.21,0-4,1.79-4,4v23.24c0,2.21,1.79,4,4,4h59.04l249.49-8.15,27.1-1.82,139.1,1.63Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "28",
|
||||
"d": "M2442.36,1633.19c2.23.04,4.07-1.76,4.07-4v-23.85c0-2.15-1.7-3.91-3.85-4l-138.93-5.39c-.25-.01-.49,0-.74.04l-26.73,3.91-249.49,13.12h-59.04c-2.21,0-4,1.79-4,4v23.24c0,2.21,1.79,4,4,4h59.04l249.49-10.85,27.1-2.72,139.08,2.5Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "29",
|
||||
"d": "M2442.33,1595.16c2.25.05,4.1-1.75,4.1-4v-23.85c0-2.14-1.68-3.9-3.82-4l-138.89-6.26c-.29-.01-.59.01-.88.06l-26.66,4.78-249.49,15.82h-59.04c-2.21,0-4,1.79-4,4v23.24c0,2.21,1.79,4,4,4h59.04l249.49-13.55,26.79-3.58c.2-.02.41-.04.62-.03l138.74,3.37Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "30",
|
||||
"d": "M2442.31,1557.07c2.25.06,4.12-1.75,4.12-4v-23.85c0-2.13-1.67-3.89-3.8-4l-138.89-7.13c-.31-.02-.61,0-.92.05l-26.64,4.79-249.49,19.62h-59.04c-2.21,0-4,1.79-4,4v23.24c0,2.21,1.79,4,4,4h59.04l249.49-16.45,26.71-4.46c.26-.04.52-.06.78-.05l138.64,4.24Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "West",
|
||||
"data-floor": "31",
|
||||
"d": "M2442.26,1519.19c2.27.1,4.17-1.72,4.17-3.99v-25.79c0-2.13-1.68-3.89-3.81-4l-136.71-6.52c-.33-.02-.65,0-.97.07l-28.82,5.68-249.43,22.69h-59.04c-2.21,0-4,1.79-4,4v23.24c0,2.21,1.79,4,4,4h59.04l249.43-20.05,25.68-5.16c.32-.06.64-.09.96-.07l139.5,5.9Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "5",
|
||||
"d": "M1443.64,2579.1c-1.65-.53-2.76-2.07-2.76-3.8v-24.44c0-2.7,2.61-4.62,5.18-3.82l136.05,42.17c.73.23,1.51.24,2.25.04l316.54-86.92c.22-.06.44-.1.66-.13l57.4-5.82c2.36-.24,4.4,1.61,4.4,3.98v23.2c0,2.05-1.55,3.77-3.59,3.98l-58.19,5.9c-.24.03-.47.07-.7.14l-316.47,90.79c-.77.22-1.59.21-2.35-.04l-138.42-45.23Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "6",
|
||||
"d": "M1443.68,2540.81c-1.67-.52-2.8-2.06-2.8-3.81v-24.48c0-2.67,2.57-4.59,5.14-3.83l136.14,40.48c.7.21,1.44.22,2.15.04l316.62-82.56c.2-.05.4-.09.6-.11l57.43-5.82c2.36-.24,4.4,1.61,4.4,3.98v23.2c0,2.05-1.55,3.77-3.59,3.97l-58.21,5.91c-.22.02-.44.06-.66.12l-316.54,86.44c-.74.2-1.52.18-2.25-.05l-138.43-43.48Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "7",
|
||||
"d": "M1443.72,2503.17c-1.69-.51-2.84-2.07-2.84-3.83v-24.5c0-2.66,2.54-4.58,5.1-3.85l136.22,38.88c.68.19,1.39.2,2.07.03l316.65-79.08c.2-.05.41-.08.62-.1l57.48-5c2.33-.2,4.34,1.64,4.34,3.99v23.21c0,2.07-1.58,3.8-3.65,3.98l-58.15,5.06c-.22.02-.44.06-.66.11l-316.58,82.96c-.71.19-1.46.18-2.17-.04l-138.43-41.82Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "8",
|
||||
"d": "M1443.79,2465.79c-1.72-.49-2.91-2.06-2.91-3.85v-24.55c0-2.62,2.49-4.54,5.03-3.86l136.34,36.32c.64.17,1.32.18,1.96.03l316.7-75.61c.21-.05.42-.08.64-.09l57.52-4.17c2.32-.17,4.29,1.67,4.29,3.99v23.22c0,2.09-1.62,3.84-3.71,3.99l-58.08,4.2c-.23.02-.46.06-.68.11l-316.62,79.49c-.68.17-1.39.16-2.07-.03l-138.41-39.19Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "9",
|
||||
"d": "M1443.83,2427.22c-1.74-.47-2.95-2.06-2.95-3.86v-24.57c0-2.61,2.45-4.52,4.98-3.88l136.44,34.63c.61.15,1.25.16,1.86.02l316.72-71.13c.23-.05.46-.08.7-.09l57.61-2.5c2.28-.1,4.17,1.72,4.17,3.99v23.24c0,2.14-1.68,3.9-3.82,3.99l-57.94,2.52c-.25.01-.5.05-.74.1l-316.64,75.01c-.65.16-1.33.15-1.97-.03l-138.42-37.44Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "10",
|
||||
"d": "M1443.9,2390.06c-1.77-.44-3.02-2.04-3.02-3.88v-24.6c0-2.58,2.4-4.49,4.91-3.9l136.57,32.07c.57.13,1.17.14,1.74.02l316.8-66.66c.22-.05.43-.07.65-.08l57.64-2.51c2.28-.1,4.17,1.72,4.17,4v23.23c0,2.14-1.68,3.9-3.82,4l-57.96,2.52c-.24.01-.47.04-.7.09l-316.72,70.54c-.61.14-1.24.13-1.85-.02l-138.41-34.82Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "11",
|
||||
"d": "M1443.95,2351.54c-1.8-.43-3.07-2.04-3.07-3.89v-24.63c0-2.56,2.37-4.46,4.87-3.9l136.66,30.36c.54.12,1.1.12,1.64.02l316.85-62.19c.22-.04.44-.07.66-.07l57.69-1.67c2.25-.07,4.11,1.74,4.11,3.99v23.24c0,2.17-1.72,3.94-3.88,4l-57.9,1.68c-.24,0-.47.03-.7.08l-316.77,66.07c-.58.12-1.18.12-1.75-.02l-138.41-33.07Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "12",
|
||||
"d": "M1443.99,2313.69c-1.82-.41-3.11-2.03-3.11-3.9v-24.65c0-2.54,2.34-4.44,4.82-3.91l136.76,28.74c.51.11,1.03.12,1.55.02l317.81-58.81c.2-.04.41-.06.61-.06l56.82-1.67c2.25-.07,4.11,1.74,4.11,3.99v23.24c0,2.16-1.72,3.94-3.88,4l-57.02,1.68c-.22,0-.44.03-.66.07l-317.74,62.7c-.55.11-1.11.1-1.66-.03l-138.41-31.41Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "13",
|
||||
"d": "M1444.06,2276.23c-1.85-.39-3.18-2.03-3.18-3.92v-24.68c0-2.51,2.28-4.4,4.75-3.93l136.89,26.18c.47.09.95.09,1.43.01l316.97-54.33c.2-.04.41-.06.62-.06l57.77-.84c2.23-.03,4.05,1.77,4.05,4v23.24c0,2.19-1.75,3.97-3.94,4l-57.86.84c-.22,0-.45.02-.66.06l-316.9,58.23c-.51.09-1.03.08-1.54-.02l-138.4-28.78Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "14",
|
||||
"d": "M1444.11,2237.72c-1.88-.36-3.23-2.01-3.23-3.92v-23.73c0-2.49,2.23-4.37,4.68-3.95l137.02,23.61c.43.07.87.07,1.3.01l317.04-49.86c.2-.03.41-.05.62-.05h57.82c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-57.8c-.22,0-.45.02-.67.06l-316.94,53.74c-.48.08-.96.08-1.44-.02l-138.4-27.13Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "15",
|
||||
"d": "M1444.21,2200.98c-1.92-.33-3.33-2-3.33-3.95v-24.73c0-2.45,2.18-4.33,4.6-3.96l137.16,21.03c.39.06.79.06,1.18,0l317.12-45.38c.19-.03.38-.04.57-.04h57.85c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-57.83c-.2,0-.41.02-.61.05l-317.05,49.27c-.42.07-.86.07-1.28-.01l-138.38-23.52Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "16",
|
||||
"d": "M1444.23,2162.08c-1.93-.32-3.35-1.99-3.35-3.95v-23.77c0-2.43,2.15-4.3,4.56-3.96l137.26,19.3c.35.05.71.05,1.07,0l317.46-41.04h58.13c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.13l-317.39,44.94c-.41.05-.81.05-1.21-.02l-138.4-22.75Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "17",
|
||||
"d": "M1444.3,2124.26c-1.96-.28-3.42-1.97-3.42-3.95v-23.8c0-2.4,2.1-4.26,4.48-3.97l137.4,16.72c.31.03.63.04.94,0l317.53-36.65h58.13c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.13l-317.46,40.55c-.36.05-.72.04-1.08-.01l-138.39-20.13Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "18",
|
||||
"d": "M1443.96,2086.83c-2-.26-3.5-1.96-3.5-3.97v-23.82c0-2.37,2.05-4.22,4.41-3.97l137.54,14.12c.27.03.54.03.81,0l317.59-32.16h58.14c2.2,0,4,1.79,4,4v23.24c0,2.21-1.8,4-4,4h-58.14l-317.52,36.06c-.32.04-.64.04-.95,0l-138.38-17.5Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "19",
|
||||
"d": "M1444.45,2049.91c-2.03-.22-3.57-1.93-3.57-3.98v-24.8c0-2.35,2.02-4.19,4.36-3.98l137.64,12.49c.23.02.47.02.71,0l317.64-27.77h58.13c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.13l-317.59,31.68c-.27.02-.55.02-.82-.01l-138.37-14.87Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "20",
|
||||
"d": "M1444.5,2011.85c-2.05-.19-3.62-1.92-3.62-3.98v-24.81c0-2.33,1.99-4.17,4.31-3.99l137.74,10.76c.2.02.4.02.6,0l317.7-23.28h58.13c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.13l-317.64,27.19c-.24.02-.48.02-.72,0l-138.37-13.13Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "21",
|
||||
"d": "M1444.84,1973.28c-2.08-.17-3.67-1.91-3.67-3.99v-30.15c0-2.3,1.93-4.13,4.23-3.99l150.38,8.82,305.73-16.05,58.08-.84c2.24-.03,4.06,1.77,4.06,4v27.68c0,2.21-1.79,4-4,4h-58.14l-317.69,22c-.2,0-.4,0-.6-.01l-138.38-11.47Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-name": "Sky Garden",
|
||||
"d": "M1440.88,1803.85v115.81c0,2.11,1.63,3.85,3.74,3.99l151.21,9.86,305.4-17.52,58.2.03c2.21,0,4.01-1.79,4.01-4v-109.69c0-2.21-1.79-4-4-4h-58.21l-318,2.8-138.31-1.28c-2.23-.02-4.04,1.78-4.04,4Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "24",
|
||||
"d": "M1444.85,1785.71c-2.2-.02-3.97-1.81-3.97-4v-23.87c0-2.18,1.75-3.97,3.93-4l138.42-2.22,318,3.4h58.13c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.13l-318,.51-138.38-1.06Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "25",
|
||||
"d": "M1445.19,1747.31c-2.22.01-4.02-1.78-4.02-4v-23.87c0-2.16,1.72-3.93,3.88-3.99l138.47-3.98,317.99,7.91h58.14c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.14l-317.99-3.99-138.33.68Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "26",
|
||||
"d": "M1445.26,1709.96c-2.24.06-4.09-1.75-4.09-3.99v-23.87c0-2.13,1.67-3.89,3.81-3.99l138.54-6.61,317.99,12.41h58.14c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.14l-317.99-8.49-138.26,3.3Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "27",
|
||||
"d": "M1445.31,1671.62c-2.26.08-4.14-1.73-4.14-4v-23.85c0-2.12,1.65-3.87,3.76-4l138.59-8.26,317.99,16.91h58.14c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.14l-317.99-12.99-138.21,4.95Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "28",
|
||||
"d": "M1445.39,1633.93c-2.29.13-4.22-1.69-4.22-3.99v-23.85c0-2.09,1.6-3.82,3.68-3.99l138.38-10.87c.19-.02.39-.02.58,0l317.7,21.38h58.14c2.21,0,4,1.8,4,4v23.24c0,2.21-1.79,4-4,4h-58.14l-317.99-17.49-138.13,7.57Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "29",
|
||||
"d": "M1445.43,1596.18c-2.3.16-4.26-1.67-4.26-3.99v-23.84c0-2.07,1.58-3.8,3.64-3.98l138.37-12.53c.22-.02.45-.02.68,0l317.65,25.78h58.14c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.14l-317.99-21.9-138.09,9.22Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "30",
|
||||
"d": "M1445.51,1558.32c-2.34.2-4.34-1.64-4.34-3.98v-23.83c0-2.04,1.53-3.75,3.56-3.98l138.38-15.15c.27-.03.55-.03.82,0l317.58,31.17h58.14c2.21,0,4,1.79,4,4v23.24c0,2.21-1.79,4-4,4h-58.14l-317.65-27.27c-.23-.02-.45-.02-.68,0l-137.67,11.8Z"
|
||||
},
|
||||
{
|
||||
"data-wing": "East",
|
||||
"data-floor": "31",
|
||||
"d": "M1445.56,1520.64c-2.35.23-4.39-1.62-4.39-3.98v-23.82c0-2.02,1.51-3.73,3.52-3.97l134.43-16.15c.3-.04.61-.04.91-.01l321.48,34.61h58.14c2.21,0,4,1.8,4,4v23.25c0,2.2-1.79,4-4,4h-58.14l-317.6-31.47c-.26-.02-.52-.02-.78,0l-137.57,13.54Z"
|
||||
}
|
||||
]
|
||||
+261
-74
@@ -1,7 +1,42 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Button2 from "../components/Button2";
|
||||
import { Transition } from "react-transition-group";
|
||||
import FloorPath from "../components/FloorPath";
|
||||
import paths from "../data/floorPaths.json";
|
||||
import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
|
||||
import Button3 from "../components/Button3";
|
||||
import InfoIcon from "../components/icons/InfoIcon";
|
||||
import Header from "../components/Header";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ArrowRightIcon from "../components/icons/ArrowRightIcon";
|
||||
|
||||
const floors = [
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"24",
|
||||
"25",
|
||||
"26",
|
||||
"27",
|
||||
"28",
|
||||
"29",
|
||||
"30",
|
||||
"31",
|
||||
];
|
||||
|
||||
function Test2Page() {
|
||||
const ref = useRef<HTMLImageElement>(null);
|
||||
@@ -9,7 +44,14 @@ function Test2Page() {
|
||||
const [imageHeight, setImageHeight] = useState(0);
|
||||
// const [offsetTop, setOffsetTop] = useState<number>(0);
|
||||
const [scaled, setScaled] = useState(false);
|
||||
const [selectedSide, setSelectedSide] = useState<string>();
|
||||
const [selectedWing, setSelectedWing] = useState<string>();
|
||||
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
|
||||
const [showPopup, setShowPopup] = useState<boolean>(false);
|
||||
const [selectedFloorPath, setSelectedFloorPath] = useState<SVGPathElement>();
|
||||
const [hoveredFloor, setHoveredFloor] = useState<string>();
|
||||
const navigate = useNavigate();
|
||||
const [hoveredWing, setHoveredWing] = useState<string>();
|
||||
const [selectedIndex, setSelectedIndex] = useState<number>(0);
|
||||
|
||||
function handleResize() {
|
||||
if (window.innerHeight > window.innerWidth) {
|
||||
@@ -19,6 +61,39 @@ function Test2Page() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
|
||||
const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
|
||||
const y = e.clientY - e.currentTarget.getBoundingClientRect().top;
|
||||
|
||||
setMousePos([x, y]);
|
||||
}
|
||||
|
||||
function handleMouseEnter(e: React.MouseEvent<SVGPathElement>) {
|
||||
console.log(e);
|
||||
setSelectedFloorPath(e.currentTarget);
|
||||
setHoveredWing(e.currentTarget.dataset["wing"]);
|
||||
setShowPopup(true);
|
||||
}
|
||||
|
||||
function handleMouseLeave(e: React.MouseEvent<SVGPathElement>) {
|
||||
console.log(e);
|
||||
setShowPopup(false);
|
||||
}
|
||||
|
||||
function handleClick(e: React.MouseEvent<SVGPathElement>) {
|
||||
setSelectedWing(e.currentTarget.dataset["wing"]);
|
||||
}
|
||||
|
||||
function prev() {
|
||||
if (selectedIndex === 0) return;
|
||||
setSelectedIndex((prev) => prev - 1);
|
||||
}
|
||||
|
||||
function next() {
|
||||
if (selectedIndex === floors.length - 1) return;
|
||||
setSelectedIndex((prev) => prev + 1);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleResize();
|
||||
|
||||
@@ -36,9 +111,13 @@ function Test2Page() {
|
||||
setImageHeight(ref.current.naturalHeight);
|
||||
}, [ref.current]);
|
||||
|
||||
useEffect(() => {
|
||||
setHoveredFloor(floors[selectedIndex]);
|
||||
}, [selectedIndex]);
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="absolute h-14 w-full bg-white z-10 p-4 flex gap-4">
|
||||
<div className="relative overflow-hidden" onMouseMove={handleMouseMove}>
|
||||
{/* <div className="absolute h-14 w-full bg-white z-10 p-4 flex gap-4">
|
||||
<Button2 size="small" onClick={() => setSelectedSide("left")}>
|
||||
Left
|
||||
</Button2>
|
||||
@@ -48,14 +127,10 @@ function Test2Page() {
|
||||
<Button2 size="small" onClick={() => setSelectedSide(undefined)}>
|
||||
None
|
||||
</Button2>
|
||||
</div>
|
||||
</div> */}
|
||||
<Header />
|
||||
|
||||
<Transition
|
||||
in={selectedSide === "right"}
|
||||
timeout={300}
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
>
|
||||
<Transition in={!!selectedWing} timeout={300} mountOnEnter unmountOnExit>
|
||||
{(state) => (
|
||||
<div
|
||||
className={`absolute top-0 h-screen bg-white right-0 sm:w-1/2 z-10 transition-all duration-300 ${state}`}
|
||||
@@ -67,73 +142,122 @@ function Test2Page() {
|
||||
quibusdam omnis nam. Odit ut tempore porro, sequi iste fugit.
|
||||
Sunt consequatur magnam ducimus quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
Ducimus commodi laborum ea hic eligendi reiciendis deleniti
|
||||
eveniet optio laudantium nam dolores voluptatum sint tempora
|
||||
quia facilis perferendis culpa, ipsam saepe nostrum? Minima, id
|
||||
fugit odio laboriosam est accusantium.
|
||||
</p>
|
||||
<p>
|
||||
Veniam placeat voluptatum fuga aut, commodi ab impedit odit,
|
||||
error dolorum excepturi facere sit voluptates. Officiis,
|
||||
voluptatibus expedita, optio ea error minus fugiat soluta
|
||||
voluptate non maxime architecto velit reiciendis.
|
||||
</p>
|
||||
<p>
|
||||
Quam commodi quae ut est consectetur nostrum delectus aliquam
|
||||
perspiciatis, maiores vero dicta, voluptas eaque provident
|
||||
consequatur quibusdam laboriosam. Labore vitae laborum ab,
|
||||
eveniet obcaecati molestiae sed nesciunt debitis corporis!
|
||||
</p>
|
||||
<p>
|
||||
Vitae rerum totam a quod porro sed debitis, autem eveniet
|
||||
commodi, repellendus dignissimos architecto asperiores repellat
|
||||
labore accusantium ab excepturi? Doloremque fuga, perspiciatis
|
||||
amet et laborum dolorum exercitationem illum dolores?
|
||||
</p>
|
||||
<p>
|
||||
Nisi maxime, recusandae eaque officiis earum est similique
|
||||
itaque. Eos facere harum rerum nesciunt nulla quidem vitae
|
||||
consectetur voluptatum, sunt beatae tenetur modi molestias
|
||||
architecto, et porro magni magnam quod.
|
||||
</p>
|
||||
<p>
|
||||
Quibusdam repellat veritatis ullam asperiores exercitationem
|
||||
consectetur incidunt consequuntur vitae, dolores nobis in quo
|
||||
recusandae officiis, porro nemo accusantium dicta? Incidunt
|
||||
obcaecati assumenda ullam, amet repellendus in excepturi ad
|
||||
nulla.
|
||||
</p>
|
||||
<p>
|
||||
Quam reiciendis reprehenderit numquam doloremque provident iure,
|
||||
assumenda asperiores commodi qui maxime eveniet quaerat
|
||||
blanditiis facilis consequatur, molestias libero saepe delectus
|
||||
ut omnis? Aliquam voluptates molestiae voluptas quasi beatae.
|
||||
Laboriosam?
|
||||
</p>
|
||||
<p>
|
||||
Eveniet nobis perferendis tempora nesciunt aperiam ad id quod
|
||||
laboriosam, maxime aliquid repudiandae, voluptate explicabo
|
||||
ullam et. Neque perferendis ipsum ab provident ipsam! Tempora
|
||||
tenetur neque vel voluptatem voluptatibus aperiam?
|
||||
</p>
|
||||
<p>
|
||||
At vel laborum adipisci enim recusandae unde consequatur hic
|
||||
repudiandae earum quaerat laboriosam sed animi ratione,
|
||||
molestiae dignissimos vero cumque minima dicta perspiciatis?
|
||||
Veniam aspernatur nam dolorem vitae, facilis velit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Transition>
|
||||
|
||||
<div
|
||||
className={`absolute z-10 bg-white rounded-2xl w-[344px] transition-[opacity,transform] duration-300 p-6 space-y-4 pointer-events-none ${
|
||||
selectedFloorPath?.dataset["wing"] === "West"
|
||||
? "-translate-x-[calc(100%+16px)]"
|
||||
: "translate-x-4"
|
||||
} -translate-y-[50%] ${showPopup ? "opacity-100" : "opacity-0"}`}
|
||||
style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
|
||||
>
|
||||
<div className="flex items-start justify-between pb-4 border-b border-[#E2E2DC]">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xl text-[#0D1922] font-semibold">
|
||||
{selectedFloorPath?.dataset["name"] === "Sky Garden"
|
||||
? selectedFloorPath?.dataset["name"]
|
||||
: `${selectedFloorPath?.dataset["floor"]} floor`}
|
||||
</p>
|
||||
<p className="text-xs font-semibold">
|
||||
{selectedFloorPath?.dataset["name"] !== "Sky Garden" &&
|
||||
`${selectedFloorPath?.dataset["wing"]} Wing`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-[#00BED7] rounded-full px-2 py-[3px]">
|
||||
<p className="text-white text-xs font-semibold">0 units</p>
|
||||
</div>
|
||||
</div>
|
||||
{selectedFloorPath?.dataset["name"] !== "Sky Garden" ? (
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
||||
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm">Studio Flex</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
||||
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm">Studio²</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
||||
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm">1 Bedroom²</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
||||
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm">2 Bedroom²</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
||||
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm">Indoor</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
|
||||
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm">Outdoor</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="absolute top-0 left-0 z-10">
|
||||
<div className="mt-14 p-4">
|
||||
<div className="flex gap-2">
|
||||
<Button3
|
||||
icon={<ArrowLeftIcon />}
|
||||
onlyIcon
|
||||
onClick={() => navigate("..")}
|
||||
/>
|
||||
<Button3
|
||||
variant="secondary"
|
||||
icon={<InfoIcon />}
|
||||
onClick={() => navigate("/about-project")}
|
||||
>
|
||||
About Project
|
||||
</Button3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="transition-all duration-300"
|
||||
style={{
|
||||
transform: `translateX(${
|
||||
selectedSide === "left" ? 25 : selectedSide === "right" ? -25 : 0
|
||||
}%)`,
|
||||
transform: `translateX(${selectedWing ? -25 : 0}%)`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -151,14 +275,77 @@ function Test2Page() {
|
||||
viewBox={`0 0 ${imageWidth} ${imageHeight}`}
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
>
|
||||
<polygon
|
||||
points="1440.1 1460.16 1440.1 1488.24 1580.48 1472.39 1580.48 1440.5 1440.1 1460.16"
|
||||
className="fill-white hover:fill-black transition-[fill]"
|
||||
/>
|
||||
{paths.map((path, index) => (
|
||||
<FloorPath
|
||||
key={index}
|
||||
{...path}
|
||||
selected={
|
||||
path["data-wing"] && path["data-floor"]
|
||||
? path["data-wing"] === hoveredWing &&
|
||||
path["data-floor"] === hoveredFloor
|
||||
: false
|
||||
}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sm:hidden absolute bottom-0 w-full p-3 bg-white">
|
||||
<div className=" rounded-2xl flex">
|
||||
<Button3 onClick={() => setHoveredWing("East")}>East</Button3>
|
||||
<Button3 onClick={() => setHoveredWing("West")}>West</Button3>
|
||||
</div>
|
||||
<div className="relative overflow-hidden px-4 py-2 ">
|
||||
<div className="relative px-12 pt-2.5 pb-[18px] border-b border-[#E2E2DC] overflow-hidden">
|
||||
<div
|
||||
className="flex gap-4 transition-transform mx-12"
|
||||
style={{
|
||||
transform: `translateX(calc(50% - 16px - ${
|
||||
selectedIndex * 32
|
||||
}px)`,
|
||||
}}
|
||||
>
|
||||
{floors.map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`min-w-4 w-4 min-h-4 h-4 flex items-center justify-center transition-all ${
|
||||
selectedIndex === index ? "font-semibold" : ""
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-white via-transparent to-white "></div>
|
||||
</div>
|
||||
|
||||
{selectedIndex !== 0 && (
|
||||
<Button3
|
||||
variant="secondary"
|
||||
size="small"
|
||||
icon={<ArrowLeftIcon />}
|
||||
onlyIcon
|
||||
className="absolute top-2 left-2"
|
||||
onClick={prev}
|
||||
/>
|
||||
)}
|
||||
{selectedIndex !== floors.length - 1 && (
|
||||
<Button3
|
||||
variant="secondary"
|
||||
size="small"
|
||||
icon={<ArrowRightIcon className="w-5 h-5" />}
|
||||
onlyIcon
|
||||
className="absolute top-2 right-2"
|
||||
onClick={next}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user