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-07-26 17:38:47 +05:00
parent b3e6ff5e9c
commit 08b86c8b51
14 changed files with 520 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx
+28 -32
View File
@@ -1,25 +1,21 @@
interface Props {
handleMouseOver: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
handleMouseOut: () => void;
handleClick: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
onMouseEnter: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
onMouseLeave: () => void;
onClick: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
}
function EastWingFloorLayout({
handleMouseOver,
handleMouseOut,
handleClick,
}: Props) {
function onMouseEnter(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
e.currentTarget.style.fill = "rgba(0, 190, 215, .25)";
function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
// function onMouseEnter(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
// e.currentTarget.style.fill = "rgba(0, 190, 215, .25)";
handleMouseOver(e);
}
// handleMouseOver(e);
// }
function onMouseLeave(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
e.currentTarget.style.fill = "rgba(255, 255, 255, 0)";
// function onMouseLeave(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
// e.currentTarget.style.fill = "rgba(255, 255, 255, 0)";
handleMouseOut();
}
// handleMouseOut();
// }
return (
<svg
@@ -1276,7 +1272,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={2}
@@ -1289,7 +1285,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={3}
@@ -1302,7 +1298,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={4}
@@ -1315,7 +1311,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={5}
@@ -1328,7 +1324,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={6}
@@ -1341,7 +1337,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={7}
@@ -1354,7 +1350,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={8}
@@ -1367,7 +1363,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={16}
@@ -1380,7 +1376,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={15}
@@ -1393,7 +1389,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={14}
@@ -1406,7 +1402,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={13}
@@ -1419,7 +1415,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={12}
@@ -1432,7 +1428,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={11}
@@ -1445,7 +1441,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={10}
@@ -1458,7 +1454,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
<path
data-number={9}
@@ -1471,7 +1467,7 @@ function EastWingFloorLayout({
className="cursor-pointer transition-colors"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleClick}
onClick={onClick}
/>
</g>
</g>
client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+85 -90
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react";
import { useState } from "react";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import useModal from "../../../store/useModal";
import EastWingFloorLayout from "./EastWingFloorLayout";
@@ -18,9 +18,9 @@ interface Props {
function FloorSidebar({ currentFloor }: Props) {
const { setModal } = useModal();
const descRef = useRef(null);
const { setIsSidebar } = useWingSidebar();
const [hoveredUnit, setHoveredUnit] = useState<IUnit | null>(null);
const [hoveredUnit, setHoveredUnit] = useState<IUnit | undefined>();
const [isShowPopup, setIsShowPopup] = useState(false);
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
const [type, setType] = useState<string | null>(null);
@@ -42,19 +42,27 @@ function FloorSidebar({ currentFloor }: Props) {
}
}
function handleOnMouseOver(e: React.MouseEvent<SVGPathElement>) {
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]);
}
async function handleMouseEnter(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);
setType(type);
setIsShowPopup(true);
setHoveredUnit(hoveredUnit);
}
function handleOnMouseOut() {
setHoveredUnit(null);
function handleMouseLeave() {
setIsShowPopup(false);
setHoveredUnit(undefined);
}
function handleClick() {
@@ -63,94 +71,81 @@ function FloorSidebar({ currentFloor }: Props) {
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
className="absolute w-full h-[calc(100vh-56px)] right-0 z-30 bg-[#F3F3F2] p-6 top-[56px] flex flex-col"
onMouseMove={handleMouseMove}
>
<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>
<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>
<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="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
<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} />
</>
<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
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
) : (
<WestWingFloorLayout
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
)
) : (
<EastWingFloorLayout
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
/>
)}
</svg>
<UnitPopup
unit={hoveredUnit}
type={type}
isShowPopup={isShowPopup}
mousePos={mousePos}
/>
</div>
);
}
client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx
+7 -9
View File
@@ -3,27 +3,25 @@ import VirtualTourIcon from "../../icons/VirtualTourIcon";
import unitTypes from "../../../data/unitTypes.json";
interface Props {
unit: IUnit | null;
unit: IUnit | undefined;
type: string | null;
isShowPopup: boolean;
mousePos: [number, number];
}
function UnitPopup({ unit, type, mousePos }: Props) {
function UnitPopup({ unit, type, isShowPopup, 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"
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"
}`}
style={{
top: `${mousePos[1]}px`,
left: `${mousePos[0]}px`,
}}
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
{unit.unitName}, {unit.totalArea} Sqft
</p>
<div className="text-xs font-semibold flex items-center gap-2">
<p>{unit.unitNo[0] === "E" ? "East" : "West"} Wing</p>
client/src/components/complexWingPage/FloorSidebar/WestWingBottomFloorLayout.tsx
+65 -70
View File
@@ -1,33 +1,28 @@
import { useRef } from "react";
interface Props {
handleMouseOver: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
handleMouseOut: () => void;
handleClick: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
onMouseEnter: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
onMouseLeave: () => void;
onClick: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
}
function WestWingBottomFloorLayout({
handleMouseOver,
handleMouseOut,
handleClick,
onMouseEnter,
onMouseLeave,
onClick,
}: Props) {
const ref = useRef<SVGSVGElement>(null);
// function onMouseOver(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
// e.currentTarget.style.fill = "rgba(0, 190, 215, .25)";
function onMouseOver(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
e.currentTarget.style.fill = "rgba(0, 190, 215, .25)";
// handleMouseOver(e);
// }
handleMouseOver(e);
}
// function onMouseOut(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
// e.currentTarget.style.fill = "rgba(255, 255, 255, 0)";
function onMouseOut(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
e.currentTarget.style.fill = "rgba(255, 255, 255, 0)";
handleMouseOut();
}
// handleMouseOut();
// }
return (
<svg
ref={ref}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 619.96 570.52"
className="w-full h-full"
@@ -1436,9 +1431,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={6}
@@ -1449,9 +1444,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={5}
@@ -1462,9 +1457,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={4}
@@ -1475,9 +1470,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={3}
@@ -1488,9 +1483,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={2}
@@ -1501,9 +1496,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={1}
@@ -1515,9 +1510,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={8}
@@ -1529,9 +1524,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={9}
@@ -1542,9 +1537,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={10}
@@ -1555,9 +1550,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={11}
@@ -1568,9 +1563,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={12}
@@ -1581,9 +1576,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={13}
@@ -1594,9 +1589,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={14}
@@ -1607,9 +1602,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={15}
@@ -1620,9 +1615,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={16}
@@ -1633,9 +1628,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={17}
@@ -1646,9 +1641,9 @@ function WestWingBottomFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
</g>
</g>
client/src/components/complexWingPage/FloorSidebar/WestWingFloorLayout.tsx
+57 -61
View File
@@ -1,25 +1,21 @@
interface Props {
handleMouseOver: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
handleMouseOut: () => void;
handleClick: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
onMouseEnter: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
onMouseLeave: () => void;
onClick: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
}
function WestWingFloorLayout({
handleMouseOver,
handleMouseOut,
handleClick,
}: Props) {
function onMouseOver(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
e.currentTarget.style.fill = "rgba(0, 190, 215, .25)";
function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) {
// function onMouseOver(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
// e.currentTarget.style.fill = "rgba(0, 190, 215, .25)";
handleMouseOver(e);
}
// handleMouseOver(e);
// }
function onMouseOut(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
e.currentTarget.style.fill = "rgba(255, 255, 255, 0)";
// function onMouseOut(e: React.MouseEvent<SVGPathElement, MouseEvent>) {
// e.currentTarget.style.fill = "rgba(255, 255, 255, 0)";
handleMouseOut();
}
// handleMouseOut();
// }
return (
<svg
@@ -1273,9 +1269,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={6}
@@ -1286,9 +1282,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={5}
@@ -1299,9 +1295,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={4}
@@ -1312,9 +1308,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={3}
@@ -1325,9 +1321,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={2}
@@ -1338,9 +1334,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={1}
@@ -1352,9 +1348,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={8}
@@ -1366,9 +1362,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={9}
@@ -1379,9 +1375,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={10}
@@ -1392,9 +1388,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={11}
@@ -1405,9 +1401,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={12}
@@ -1418,9 +1414,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={13}
@@ -1431,9 +1427,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={14}
@@ -1444,9 +1440,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
<path
data-number={15}
@@ -1457,9 +1453,9 @@ function WestWingFloorLayout({
strokeWidth: 0,
}}
className="cursor-pointer transition-colors"
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={handleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
</g>
</g>