From f1891f05d29ae282e0452e7347e2af1cc5aa7043 Mon Sep 17 00:00:00 2001 From: zojgame Date: Tue, 4 Jun 2024 18:43:30 +0500 Subject: [PATCH] layout hovering start --- src/components/MasterSelector.tsx | 2 +- .../FloorSidebar/ApartmentDescription.tsx | 22 + .../FloorSidebar/FloorEastWingLayout.tsx | 512 ++++++++++++++++-- .../FloorSidebar/FloorSidebar.tsx | 8 +- .../FloorWestWingHighlighting.tsx | 440 +++++++++++++++ .../FloorSidebar/FloorWestWingLayout.tsx | 502 +++++++++++++++-- src/data/appartments.json | 2 +- 7 files changed, 1388 insertions(+), 100 deletions(-) create mode 100644 src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx create mode 100644 src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx diff --git a/src/components/MasterSelector.tsx b/src/components/MasterSelector.tsx index 35c4000..61c8f7f 100644 --- a/src/components/MasterSelector.tsx +++ b/src/components/MasterSelector.tsx @@ -21,7 +21,7 @@ const MasterSelector = ({ title }: MasterSelectorProps) => {

{title}

-
+
+971
diff --git a/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx b/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx new file mode 100644 index 0000000..f603592 --- /dev/null +++ b/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx @@ -0,0 +1,22 @@ +interface ApartmentDescriptionProps { + isVisible?: boolean; +} + +const ApartmentDescription = ({ + isVisible = true, +}: ApartmentDescriptionProps) => { + return ( +
+

+ 1 bedroom, 609 Sqft +

+

AED 1,668,888

+
+ ); +}; + +export default ApartmentDescription; diff --git a/src/components/complexWingPage/FloorSidebar/FloorEastWingLayout.tsx b/src/components/complexWingPage/FloorSidebar/FloorEastWingLayout.tsx index cfba6bf..c15bdf2 100644 --- a/src/components/complexWingPage/FloorSidebar/FloorEastWingLayout.tsx +++ b/src/components/complexWingPage/FloorSidebar/FloorEastWingLayout.tsx @@ -1,55 +1,473 @@ function FloorEastWingLayout() { return ( - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx index fce692a..ddc0d56 100644 --- a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx +++ b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx @@ -1,5 +1,4 @@ import { IDesctiptionFloor } from "../../../types/descriptionFloor"; -import FloorEastWingLayout from "./FloorEastWingLayout"; import FloorWestWingLayout from "./FloorWestWingLayout"; interface IFloorSidebarProps { @@ -9,7 +8,7 @@ interface IFloorSidebarProps { const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => { return (
@@ -45,12 +44,15 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {

2 Bedroom

-
+ {/*
{currentFloor?.wing === "West Wing" ? ( ) : ( )} +
*/} +
+
); diff --git a/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx b/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx new file mode 100644 index 0000000..2306cd4 --- /dev/null +++ b/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx @@ -0,0 +1,440 @@ +import { useEffect, useState } from "react"; +import ApartmentDescription from "./ApartmentDescription"; +import { createPortal } from "react-dom"; +import { div } from "three/examples/jsm/nodes/Nodes.js"; + +const FloorWestWingHighlighting = () => { + const [mousePos, setMousePos] = useState([0, 0]); + const [isDescVisible, setisDescVisible] = useState(true); + + function handleMouseMove(e: MouseEvent) { + const top = window.innerWidth / 2 - window.innerHeight / 2; + setMousePos([e.clientX, e.clientY]); + } + + useEffect(() => { + window.addEventListener("mousemove", handleMouseMove); + return () => { + window.removeEventListener("mousemove", handleMouseMove); + }; + }, []); + + function handleOnMouseOut( + event: MouseEvent + ): void { + throw new Error("Function not implemented."); + } + function handleOnMouseOver( + event: MouseEvent + ): void { + console.log("event", event); + } + + return ( + <> +
+ +
+ , + {/* {createPortal( + document.body + )} */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default FloorWestWingHighlighting; diff --git a/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx b/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx index 89ae45e..372faa8 100644 --- a/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx +++ b/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx @@ -1,55 +1,461 @@ +import FloorWestWingHighlighting from "./FloorWestWingHighlighting"; + function FloorWestWingLayout() { return ( - - + - - - - - - - - - - - + fill="#F0F0E9" + d="M1.246 146.952v15.187h141.468V257.7h70.793v-95.561h375.844v-24.076H144.315L6.229 140.227l-4.983 6.725z" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/data/appartments.json b/src/data/appartments.json index 7502c93..0ae6c7f 100644 --- a/src/data/appartments.json +++ b/src/data/appartments.json @@ -1,6 +1,6 @@ [ { - "id": "appartments-studio-1", + "id": "apartments-studio-1", "spheres": [ { "id": "studio-1_sp-01",