This commit is contained in:
2024-09-23 13:15:09 +05:00
parent 23a4047ae0
commit 405fad1b55
6 changed files with 100 additions and 73 deletions
+2 -2
View File
@@ -32,11 +32,11 @@ function FloorItem({ floor, onSelected }: Props) {
return (
<p
ref={ref}
className={`snap-center min-w-[68px] w-[68px] h-4 flex items-center justify-center text-xs font-semibold transition-[color,transform] whitespace-nowrap ${
className={`snap-center min-w-[32px] w-[32px] h-4 flex items-center justify-center text-xs font-semibold transition-[color,transform] whitespace-nowrap ${
selected ? "text-[#00BED7] scale-125" : ""
}`}
>
{floor}
{floor === "Sky Garden" ? "SG" : floor}
</p>
);
}
@@ -2431,7 +2431,7 @@ function EastWingFloorPlan({
transform="translate(411.74 50.63)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2458,7 +2458,7 @@ function EastWingFloorPlan({
transform="translate(365.57 97)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2485,7 +2485,7 @@ function EastWingFloorPlan({
transform="translate(262.01 199.05)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2512,7 +2512,7 @@ function EastWingFloorPlan({
transform="translate(235.49 225.61)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2539,7 +2539,7 @@ function EastWingFloorPlan({
transform="translate(206.63 254.63)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2566,7 +2566,7 @@ function EastWingFloorPlan({
transform="translate(179.52 282.3)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2593,7 +2593,7 @@ function EastWingFloorPlan({
transform="translate(143.08 319.56)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2620,7 +2620,7 @@ function EastWingFloorPlan({
transform="translate(42.47 413.14)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2647,7 +2647,7 @@ function EastWingFloorPlan({
transform="translate(129.9 499.95)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2674,7 +2674,7 @@ function EastWingFloorPlan({
transform="translate(177.05 447.24)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2702,7 +2702,7 @@ function EastWingFloorPlan({
transform="translate(223.49 400.85)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2729,7 +2729,7 @@ function EastWingFloorPlan({
transform="translate(260.74 365.03)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2756,7 +2756,7 @@ function EastWingFloorPlan({
transform="translate(288.32 337.22)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2783,7 +2783,7 @@ function EastWingFloorPlan({
transform="translate(324.71 299.88)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2810,7 +2810,7 @@ function EastWingFloorPlan({
transform="translate(368.68 256.57)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -2837,7 +2837,7 @@ function EastWingFloorPlan({
transform="translate(416.83 227.56)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -107,7 +107,11 @@ function FloorPlanSidebar({ floor, wing, onClose }: Props) {
}, [hoveredUnit]);
return (
<div className="flex flex-col flex-1 gap-4 p-4 overflow-y-auto select-none sm:p-6 mt-14">
<div
className={`flex flex-col flex-1 gap-4 p-4 select-none sm:p-6 mt-14 ${
floor === "Sky Garden" ? "overflow-y-auto" : ""
}`}
>
<div className="flex items-start justify-between">
<div>
<p
@@ -1191,7 +1191,7 @@ function WestWingFloorPlanLower({
transform="translate(149.83 92.95)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1216,7 +1216,7 @@ function WestWingFloorPlanLower({
transform="translate(210.12 130.71)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1241,7 +1241,7 @@ function WestWingFloorPlanLower({
transform="translate(253.93 171.38)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1266,7 +1266,7 @@ function WestWingFloorPlanLower({
transform="translate(347.25 264.98)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1291,7 +1291,7 @@ function WestWingFloorPlanLower({
transform="translate(370.4 289.11)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1316,7 +1316,7 @@ function WestWingFloorPlanLower({
transform="translate(396.29 310.83)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1341,7 +1341,7 @@ function WestWingFloorPlanLower({
transform="translate(417.58 341.01)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1366,7 +1366,7 @@ function WestWingFloorPlanLower({
transform="translate(444.34 361.63)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1391,7 +1391,7 @@ function WestWingFloorPlanLower({
transform="translate(466.53 385.89)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1416,7 +1416,7 @@ function WestWingFloorPlanLower({
transform="translate(540.98 493.98)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1441,7 +1441,7 @@ function WestWingFloorPlanLower({
transform="translate(441.39 528.45)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1466,7 +1466,7 @@ function WestWingFloorPlanLower({
transform="translate(385.23 440.62)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1491,7 +1491,7 @@ function WestWingFloorPlanLower({
transform="translate(347.89 411.09)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1516,7 +1516,7 @@ function WestWingFloorPlanLower({
transform="translate(321.28 383.69)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1541,7 +1541,7 @@ function WestWingFloorPlanLower({
transform="translate(286.9 345.23)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1566,7 +1566,7 @@ function WestWingFloorPlanLower({
transform="translate(248.69 310.41)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1591,7 +1591,7 @@ function WestWingFloorPlanLower({
transform="translate(203.64 278.77)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1169,7 +1169,7 @@ function WestWingFloorPlanUpper({
transform="translate(149.86 91.09)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1194,7 +1194,7 @@ function WestWingFloorPlanUpper({
transform="translate(213.28 124.83)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1219,7 +1219,7 @@ function WestWingFloorPlanUpper({
transform="translate(256.04 167.62)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1244,7 +1244,7 @@ function WestWingFloorPlanUpper({
transform="translate(360 272.68)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1269,7 +1269,7 @@ function WestWingFloorPlanUpper({
transform="translate(398.74 310.37)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1294,7 +1294,7 @@ function WestWingFloorPlanUpper({
transform="translate(423.53 337.86)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1319,7 +1319,7 @@ function WestWingFloorPlanUpper({
transform="translate(456.32 371.77)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1344,7 +1344,7 @@ function WestWingFloorPlanUpper({
transform="translate(542.62 496.41)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1369,7 +1369,7 @@ function WestWingFloorPlanUpper({
transform="translate(446.29 525.79)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1394,7 +1394,7 @@ function WestWingFloorPlanUpper({
transform="translate(387 439.66)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1419,7 +1419,7 @@ function WestWingFloorPlanUpper({
transform="translate(348.54 413.07)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1444,7 +1444,7 @@ function WestWingFloorPlanUpper({
transform="translate(321.97 384.61)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1469,7 +1469,7 @@ function WestWingFloorPlanUpper({
transform="translate(287.28 345.89)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1494,7 +1494,7 @@ function WestWingFloorPlanUpper({
transform="translate(247.92 311.75)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
@@ -1519,7 +1519,7 @@ function WestWingFloorPlanUpper({
transform="translate(203.66 279.01)"
style={{
fill: "#fff",
fontFamily: "Inter-Medium, Inter",
fontFamily: "Usual",
fontSize: 9,
fontWeight: 500,
}}
+45 -22
View File
@@ -102,26 +102,26 @@ function ComplexWingPage() {
setScrolled(true);
refFloors.current?.scrollBy({
left: 84,
behavior: "smooth",
left: 24,
// behavior: "smooth",
});
setTimeout(() => {
setScrolled(false);
}, 250);
// setTimeout(() => {
setScrolled(false);
// }, 250);
}
function scrollPrev() {
setScrolled(true);
refFloors.current?.scrollBy({
left: -84,
behavior: "smooth",
left: -24,
// behavior: "smooth",
});
setTimeout(() => {
setScrolled(false);
}, 250);
// setTimeout(() => {
setScrolled(false);
// }, 250);
}
useEffect(() => {
@@ -136,7 +136,7 @@ function ComplexWingPage() {
return (
<div
className="relative max-h-screen overflow-hidden h-dvh"
className="relative overflow-hidden h-dvh"
onMouseMove={handleMouseMove}
>
<Header />
@@ -162,7 +162,14 @@ function ComplexWingPage() {
</p>
</div>
<div className="bg-[#00BED7] rounded-full px-2 py-[3px]">
<p className="text-xs font-semibold text-white">0 units</p>
<p className="text-xs font-semibold text-white">
{selectedFloorPath?.dataset["wing"] === "West" ? (
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 17 : 15}</>
) : (
16
)}{" "}
units
</p>
</div>
</div>
{selectedFloorPath?.dataset["floor"] !== "Sky Garden" ? (
@@ -171,7 +178,11 @@ function ComplexWingPage() {
<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
{selectedFloorPath?.dataset["wing"] === "West" ? (
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 6 : 0}</>
) : (
0
)}
</p>
</div>
<p className="text-sm">Studio Flex</p>
@@ -180,7 +191,11 @@ function ComplexWingPage() {
<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
{selectedFloorPath?.dataset["wing"] === "West" ? (
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 3 : 5}</>
) : (
7
)}
</p>
</div>
<p className="text-sm">Studio²</p>
@@ -191,7 +206,11 @@ function ComplexWingPage() {
<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
{selectedFloorPath?.dataset["wing"] === "West" ? (
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 6 : 8}</>
) : (
8
)}
</p>
</div>
<p className="text-sm">1 Bedroom²</p>
@@ -200,7 +219,11 @@ function ComplexWingPage() {
<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
{selectedFloorPath?.dataset["wing"] === "West" ? (
<>{+selectedFloorPath.dataset["floor"]! < 24 ? 2 : 2}</>
) : (
1
)}
</p>
</div>
<p className="text-sm">2 Bedroom²</p>
@@ -212,18 +235,18 @@ function ComplexWingPage() {
<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
3
</p>
</div>
<p className="text-sm">Indoor</p>
<p className="text-sm">Indoor Amenties</p>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 bg-[#00BED7] px-[4.5px] py-px rounded-full">
<div className="w-4 h-4 bg-[#00BED7] rounded-full flex items-center justify-center pr-px">
<p className="text-[10px] text-white font-semibold leading-[13.5px]">
0
17
</p>
</div>
<p className="text-sm">Outdoor</p>
<p className="text-sm">Outdoor Amenties</p>
</div>
</div>
)}
@@ -541,7 +564,7 @@ function ComplexWingPage() {
></div> */}
<div
id="test"
className="absolute h-6 w-[68px] top-[calc(50%-16px)] left-[calc(50%-68px)]"
className="absolute h-6 w-[32px] top-[calc(50%-16px)] left-[calc(50%-32px)]"
></div>
<div
ref={refFloors}