inmake/IRTH-2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2024-09-05 20:29:13 +05:00
parent efd77e9b1a
commit 9049662792
7 changed files with 287 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/.env.development
+1 -1
View File
@@ -1 +1 @@
VITE_SERVER_API=http://localhost:4002
VITE_SERVER_API=http://192.168.1.120:4002
client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx
+16 -16
View File
@@ -1269,7 +1269,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1282,7 +1282,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1295,7 +1295,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1308,7 +1308,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1321,7 +1321,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1334,7 +1334,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1347,7 +1347,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1360,7 +1360,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1373,7 +1373,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1386,7 +1386,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1399,7 +1399,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1412,7 +1412,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1425,7 +1425,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1438,7 +1438,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1451,7 +1451,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
@@ -1464,7 +1464,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
fill: "rgba(255, 255, 255, 0)",
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
className="transition-colors cursor-pointer"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx
+156
View File
@@ -0,0 +1,156 @@
import React, { useState } from "react";
import IUnit from "../../../types/IUnit";
import Button3 from "../../Button3";
import CloseIcon from "../../icons/CloseIcon";
import EastWingFloorLayout from "./EastWingFloorLayout";
import UnitPopup from "./UnitPopup";
import WestWingBottomFloorLayout from "./WestWingBottomFloorLayout";
import WestWingFloorLayout from "./WestWingFloorLayout";
import api from "../../../utils/api";
import useModal from "../../../store/useModal";
import UnitModal from "../../modals/UnitModal";
import { isMobile } from "react-device-detect";
interface Props {
floor: number;
wing: string;
onClose: () => void;
}
function FloorPlanSidebar({ floor, wing, onClose }: Props) {
const { setModal } = useModal();
const [hoveredUnit, setHoveredUnit] = useState<IUnit | undefined>();
const [showPopup, setShowPopup] = useState(false);
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
const [type, setType] = useState<string | null>(null);
function handleMouseEnter(e: React.MouseEvent<SVGPathElement>) {
const unitNumber = e.currentTarget.dataset.number;
const type = e.currentTarget.dataset.type;
if (!unitNumber || !type) return;
getUnit(unitNumber);
setType(type);
setShowPopup(true);
setHoveredUnit(hoveredUnit);
}
function handleMouseLeave() {
setShowPopup(false);
setHoveredUnit(undefined);
}
function handleMouseMove(e: React.MouseEvent) {
const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
const y = e.clientY - e.currentTarget.getBoundingClientRect().top;
console.log(x, y);
setMousePos([x, y]);
}
function handleClick() {
console.log("hoveredUnit", hoveredUnit);
console.log("type", type);
if (!hoveredUnit || !type) return;
setModal(<UnitModal unit={hoveredUnit} type={type} />);
}
async function getUnit(unitNumber: string) {
try {
const result: IUnit[] = await api
.get(`units?unitNo=${wing[0]}-${floor}${unitNumber.padStart(2, "0")}`)
.json();
setHoveredUnit(result[0]);
} catch (error) {
alert((error as Error).message);
}
}
return (
<div className="flex flex-col flex-1 gap-4 p-6 select-none mt-14">
<div className="flex items-start justify-between">
<div>
<p
className={`text-2xl text-[#0D1922] font-semibold ${
floor ? "opacity-100" : "opacity-0"
}`}
>
{floor} floor
</p>
<p className="text-sm">{wing} Wing</p>
</div>
<Button3
icon={<CloseIcon className="w-5 h-5" />}
onlyIcon
onClick={onClose}
/>
</div>
<div className="flex flex-col flex-1 space-y-2">
<div className="flex items-center justify-end p-4 bg-white xl:justify-between rounded-2xl">
<div className="flex gap-6 max-xl:hidden">
<div className="flex items-center gap-2">
<div className="w-5 h-5 text-white rounded-full bg-[#A19E9E] text-xs flex items-center justify-center"></div>
<p className="text-xs font-semibold">Studio Flex</p>
</div>
<div className="flex items-center gap-2">
<div className="w-5 h-5 text-white rounded-full bg-[#8299AD] text-xs flex items-center justify-center"></div>
<p className="text-xs font-semibold">Studio²</p>
</div>
<div className="flex items-center gap-2">
<div className="w-5 h-5 text-white rounded-full bg-[#BFC9D1] text-xs flex items-center justify-center"></div>
<p className="text-xs font-semibold">1 Bedroom²</p>
</div>
<div className="flex items-center gap-2">
<div className="w-5 h-5 text-white rounded-full bg-[#878FA3] text-xs flex items-center justify-center"></div>
<p className="text-xs font-semibold">2 Bedroom²</p>
</div>
</div>
<div className="text-xs text-white rounded-full bg-[#00BED7] px-2 py-[3px]">
0 units
</div>
</div>
<div className="relative flex flex-1 bg-white rounded-2xl">
<svg className="flex-1 p-10" onMouseMove={handleMouseMove}>
{wing === "West" ? (
floor <= 21 ? (
<WestWingBottomFloorLayout
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
) : (
<WestWingFloorLayout
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
)
) : (
<EastWingFloorLayout
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
)}
</svg>
{!isMobile && (
<UnitPopup
unit={hoveredUnit}
type={type}
show={showPopup}
mousePos={mousePos}
/>
)}
</div>
</div>
</div>
);
}
export default FloorPlanSidebar;
client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+8 -7
View File
@@ -45,6 +45,7 @@ function FloorSidebar({ currentFloor }: Props) {
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]);
}
@@ -91,23 +92,23 @@ function FloorSidebar({ currentFloor }: Props) {
</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="flex items-center gap-2">
<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="flex items-center gap-2">
<div className="rounded-full bg-[#8299AD] w-3 h-3"></div>
<p>Studio</p>
</div>
<div className="gap-2 flex items-center">
<div className="flex items-center gap-2">
<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="flex items-center gap-2">
<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="flex items-center gap-2">
<div className="rounded-full bg-[#B2B8C4] w-3 h-3"></div>
<p>2 Bedroom</p>
</div>
@@ -116,7 +117,7 @@ function FloorSidebar({ currentFloor }: Props) {
{floorApartments.length} units
</div> */}
</div>
<svg className="flex-1 px-10 bg-white font-semibold text-caption-m rounded-2xl py-4">
<svg className="flex-1 px-10 py-4 font-semibold bg-white text-caption-m rounded-2xl">
{currentFloor?.wing === "West Wing" ? (
currentFloor && currentFloor.floor <= 21 ? (
<WestWingBottomFloorLayout
@@ -142,7 +143,7 @@ function FloorSidebar({ currentFloor }: Props) {
<UnitPopup
unit={hoveredUnit}
type={type}
isShowPopup={isShowPopup}
show={isShowPopup}
mousePos={mousePos}
/>
</div>
client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx
+5 -5
View File
@@ -5,15 +5,15 @@ import unitTypes from "../../../data/unitTypes.json";
interface Props {
unit: IUnit | undefined;
type: string | null;
isShowPopup: boolean;
show: boolean;
mousePos: [number, number];
}
function UnitPopup({ unit, type, isShowPopup, mousePos }: Props) {
function UnitPopup({ unit, type, show, 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 pointer-events-none -translate-x-[calc(100%+16px)] -translate-y-[50%] transition-opacity ${
isShowPopup ? "opacity-100" : "opacity-0"
className={`absolute w-[344px] h-[156px] z-30 p-6 space-y-4 bg-white rounded-2xl shadow-lg pointer-events-none transition-opacity -translate-x-[calc(100%+16px)] -translate-y-[50%] ${
show ? "opacity-100" : "opacity-0"
}`}
style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
>
@@ -23,7 +23,7 @@ function UnitPopup({ unit, type, isShowPopup, mousePos }: Props) {
<p className="text-xl text-[#0D1922] font-semibold">
{unit.unitName}, {unit.totalArea} Sqft
</p>
<div className="text-xs font-semibold flex items-center gap-2">
<div className="flex items-center gap-2 text-xs font-semibold">
<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>
client/src/pages/Test2Page.tsx
+100 -93
View File
@@ -11,6 +11,8 @@ import { useNavigate } from "react-router-dom";
import ArrowRightIcon from "../components/icons/ArrowRightIcon";
import FloorItem from "../components/Test/FloorItem";
import { isMobile } from "react-device-detect";
import FloorPlanSidebar from "../components/complexWingPage/FloorSidebar/FloorPlanSidebar";
import useModal from "../store/useModal";
const floors = [
"5",
@@ -41,10 +43,10 @@ const floors = [
];
function Test2Page() {
const { modal } = useModal();
const ref = useRef<HTMLImageElement>(null);
const [imageWidth, setImageWidth] = useState(0);
const [imageHeight, setImageHeight] = useState(0);
// const [offsetTop, setOffsetTop] = useState<number>(0);
const [scaled, setScaled] = useState(false);
const [selectedWing, setSelectedWing] = useState<string>();
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
@@ -55,7 +57,7 @@ function Test2Page() {
const [hoveredWing, setHoveredWing] = useState<string>();
const [selectedIndex] = useState<number>(0);
const [selectedFloor, setSelectedFloor] = useState<string>();
// const rootRef = useRef<HTMLElement>(null);\
// const [showFloorPlanSidebar, setShowFloorPlanSidebar] = useState(false);
function handleResize() {
if (window.innerHeight > window.innerWidth) {
@@ -85,6 +87,7 @@ function Test2Page() {
}
function handleClick(e: React.MouseEvent<SVGPathElement>) {
setSelectedWing(e.currentTarget.dataset["wing"]);
setSelectedFloor(e.currentTarget.dataset["floor"]);
}
@@ -98,6 +101,11 @@ function Test2Page() {
// setSelectedIndex((prev) => prev + 1);
// }
function handleLoadedData() {
setImageWidth(ref.current!.naturalWidth);
setImageHeight(ref.current!.naturalHeight);
}
useEffect(() => {
handleResize();
@@ -108,26 +116,19 @@ function Test2Page() {
};
}, []);
useEffect(() => {
if (!ref.current) return;
setImageWidth(ref.current.naturalWidth);
setImageHeight(ref.current.naturalHeight);
}, [ref.current]);
useEffect(() => {
setHoveredFloor(floors[selectedIndex]);
}, [selectedIndex]);
return (
<div
className="relative h-dvh overflow-hidden"
className="relative overflow-hidden h-dvh"
onMouseMove={handleMouseMove}
>
<Header />
<div
className={`absolute z-10 bg-white rounded-2xl w-[344px] transition-[opacity,transform] duration-300 p-6 space-y-4 pointer-events-none ${
className={`absolute z-10 bg-white rounded-2xl w-[344px] transition-[opacity,transform] duration-300 p-6 space-y-4 pointer-events-none select-none ${
selectedFloorPath?.dataset["wing"] === "West"
? "-translate-x-[calc(100%+16px)]"
: "translate-x-4"
@@ -147,7 +148,7 @@ function Test2Page() {
</p>
</div>
<div className="bg-[#00BED7] rounded-full px-2 py-[3px]">
<p className="text-white text-xs font-semibold">0 units</p>
<p className="text-xs font-semibold text-white">0 units</p>
</div>
</div>
{selectedFloorPath?.dataset["name"] !== "Sky Garden" ? (
@@ -215,7 +216,7 @@ function Test2Page() {
</div>
<div className="absolute top-0 left-0 z-10">
<div className="mt-14 p-4">
<div className="p-4 mt-14">
<div className="flex gap-2">
<Button3
icon={<ArrowLeftIcon />}
@@ -244,78 +245,78 @@ function Test2Page() {
ref={ref}
src="/images/sequenceWing.jpg"
alt=""
className="w-full h-full object-cover"
className="object-cover w-full h-full"
onLoad={() => handleLoadedData()}
/>
<svg className="absolute top-0 left-0 w-full h-full">
<svg
viewBox={`0 0 ${imageWidth} ${imageHeight}`}
preserveAspectRatio="xMidYMid slice"
>
{!isMobile ? (
paths.map((path, index) => (
<FloorPath
key={index}
{...path}
selected={
path["data-wing"] && path["data-floor"]
? path["data-wing"] === hoveredWing &&
path["data-floor"] === hoveredFloor
: false
}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
<svg
viewBox={`0 0 ${imageWidth} ${imageHeight}`}
preserveAspectRatio="xMidYMid slice"
className="absolute top-0 left-0 w-full h-full"
>
{!isMobile ? (
paths.map((path, index) => (
<FloorPath
key={index}
{...path}
selected={
path["data-wing"] && path["data-floor"]
? path["data-wing"] === hoveredWing &&
path["data-floor"] === hoveredFloor
: false
}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
))
) : (
<>
<g
className={`transition-opacity duration-300 ${
selectedWing
? "opacity-100"
: "opacity-0 pointer-events-none"
}`}
>
{paths
.filter((path) => path["data-wing"] === selectedWing)
.map((path, index) => (
<FloorPath
key={index}
{...path}
selected={
path["data-wing"] && path["data-floor"]
? path["data-wing"] === selectedWing &&
path["data-floor"] === hoveredFloor
: false
}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
))}
</g>
<g
className={`transition-opacity duration-300 ${
selectedWing
? "opacity-0 pointer-events-none"
: "opacity-100"
}`}
>
<path
d="M1441.29,1493.16v23.81l-.29,1034.35h0v24.45c0,1.73,1.11,3.26,2.76,3.8l138.35,45.23c.76.25,1.57.27,2.34.04l316.3-90.81c.23-.06.46-.11.7-.13l58.15-5.9,3.6-.53.29-1015.83c0-2.21-1.79-4-4-4h-58.11l-321.31-34.62c-.3-.03-.6-.03-.9.01l-134.36,16.16c-2.01.24-3.52,1.94-3.52,3.97Z"
className={`fill-[#00bed7]/20`}
onClick={() => setSelectedWing("East")}
/>
))
) : (
<>
<g
className={`transition-opacity duration-300 ${
selectedWing
? "opacity-100"
: "opacity-0 pointer-events-none"
}`}
>
{paths
.filter((path) => path["data-wing"] === selectedWing)
.map((path, index) => (
<FloorPath
key={index}
{...path}
selected={
path["data-wing"] && path["data-floor"]
? path["data-wing"] === selectedWing &&
path["data-floor"] === hoveredFloor
: false
}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
))}
</g>
<g
className={`transition-opacity duration-300 ${
selectedWing
? "opacity-0 pointer-events-none"
: "opacity-100"
}`}
>
<path
d="M1441.29,1493.16v23.81l-.29,1034.35h0v24.45c0,1.73,1.11,3.26,2.76,3.8l138.35,45.23c.76.25,1.57.27,2.34.04l316.3-90.81c.23-.06.46-.11.7-.13l58.15-5.9,3.6-.53.29-1015.83c0-2.21-1.79-4-4-4h-58.11l-321.31-34.62c-.3-.03-.6-.03-.9.01l-134.36,16.16c-2.01.24-3.52,1.94-3.52,3.97Z"
className={`fill-[#00bed7]/20`}
onClick={() => setSelectedWing("East")}
/>
<path
d="M2446,1515.51v-25.79c0-2.13-1.68-3.89-3.81-3.99l-136.64-6.53c-.32-.02-.64.01-.96.07l-28.81,5.68-249.29,22.69h-59c-2.21,0-4,1.79-4,4l-.29,1015.83,3.81.34,58.82,2.71c.25.01.5.04.74.1l248.44,59.2c.36.09.71.23,1.04.41l23.43,13.25c.75.43,1.62.6,2.48.49l140.27-18.21c1.99-.26,3.48-1.96,3.48-3.97v-24.64l.29-1041.64Z"
className={`fill-[#00bed7]/20`}
onClick={() => setSelectedWing("West")}
/>
</g>
</>
)}
</svg>
<path
d="M2446,1515.51v-25.79c0-2.13-1.68-3.89-3.81-3.99l-136.64-6.53c-.32-.02-.64.01-.96.07l-28.81,5.68-249.29,22.69h-59c-2.21,0-4,1.79-4,4l-.29,1015.83,3.81.34,58.82,2.71c.25.01.5.04.74.1l248.44,59.2c.36.09.71.23,1.04.41l23.43,13.25c.75.43,1.62.6,2.48.49l140.27-18.21c1.99-.26,3.48-1.96,3.48-3.97v-24.64l.29-1041.64Z"
className={`fill-[#00bed7]/20`}
onClick={() => setSelectedWing("West")}
/>
</g>
</>
)}
</svg>
</div>
</div>
@@ -325,7 +326,7 @@ function Test2Page() {
selectedWing ? "opacity-100" : "opacity-0 pointer-events-none"
}`}
>
<div className="relative bg-white rounded-lg px-4 pt-2 pb-4 space-y-3">
<div className="relative px-4 pt-2 pb-4 space-y-3 bg-white rounded-lg">
<div className="relative overflow-hidden">
<div
id="test"
@@ -343,7 +344,7 @@ function Test2Page() {
))}
</div>
<div className="absolute top-0 left-0 w-full h-full pointer-events-none bg-gradient-to-r from-white via-transparent to-white"></div>
<div className="absolute top-0 left-0 w-full flex justify-between pointer-events-none">
<div className="absolute top-0 left-0 flex justify-between w-full pointer-events-none">
<Button3
variant="secondary"
icon={<ArrowLeftIcon className="w-4 h-4" />}
@@ -372,7 +373,7 @@ function Test2Page() {
<Button3
size="small"
icon={<ArrowRightIcon className="w-4 h-4" />}
className="w-full flex-row-reverse"
className="flex-row-reverse w-full"
onClick={() => setSelectedFloor(hoveredFloor)}
>
Explore
@@ -381,20 +382,26 @@ function Test2Page() {
</div>
</div>
<Transition in={!!selectedFloor} timeout={300} mountOnEnter unmountOnExit>
<Transition
in={!!selectedFloor && !!selectedWing}
timeout={300}
mountOnEnter
unmountOnExit
>
{(state) => (
<div
className={`absolute top-0 h-dvh bg-white right-0 sm:w-1/2 w-full z-10 transition-all duration-300 ${state}`}
className={`absolute top-0 h-dvh bg-[#F3F3F2] right-0 lg:w-1/2 w-full z-10 transition-all duration-300 flex flex-col ${state}`}
>
<div className="mt-14 overflow-auto">
<Button3 size="small" onClick={() => setSelectedFloor(undefined)}>
Close
</Button3>
<p>{selectedFloor}</p>
</div>
<FloorPlanSidebar
floor={+selectedFloor!}
wing={selectedWing!}
onClose={() => setSelectedFloor(undefined)}
/>
</div>
)}
</Transition>
{modal}
</div>
);
}
client/src/store/useModal.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ interface ModalStore {
const useModal = create<ModalStore>((set) => ({
modal: null,
setModal: (modal) => set(() => ({ modal: modal })),
setModal: (modal) => set({ modal }),
}));
export default useModal;