diff --git a/src/components/complexWingPage/FloorDescription.tsx b/src/components/complexWingPage/FloorDescription.tsx
index 0697285..ced1c96 100644
--- a/src/components/complexWingPage/FloorDescription.tsx
+++ b/src/components/complexWingPage/FloorDescription.tsx
@@ -80,7 +80,7 @@ const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => {
*/}
{
+const ApartmentDescription = ({ isVisible }: ApartmentDescriptionProps) => {
+ useEffect(() => {
+ console.log("isVisible", isVisible);
+ }, [isVisible]);
+
return (
-
-
- 1 bedroom, 609 Sqft
-
-
AED 1,668,888
+
+
+
+ 1 bedroom, 609 Sqft
+
+
AED 1,668,888
+
+
);
};
diff --git a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
index ddc0d56..898f532 100644
--- a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+++ b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
@@ -1,11 +1,38 @@
+import { useState, useEffect } from "react";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
+import ApartmentDescription from "./ApartmentDescription";
+import FloorWestWingHighlighting from "./FloorWestWingHighlighting";
import FloorWestWingLayout from "./FloorWestWingLayout";
interface IFloorSidebarProps {
currentFloor: IDesctiptionFloor | null;
onMouseEnter: () => void;
}
+
const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
+ 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 - top]);
+ setMousePos([e.clientX - 752, e.clientY - Math.abs(top) + 5]);
+ }
+
+ function handleOnMouseOut(): void {
+ setIsDescVisible(false);
+ }
+ function handleOnMouseOver(): void {
+ setIsDescVisible(true);
+ }
+
+ useEffect(() => {
+ window.addEventListener("mousemove", handleMouseMove);
+ return () => {
+ window.removeEventListener("mousemove", handleMouseMove);
+ };
+ }, []);
+
return (
- {/*
- {currentFloor?.wing === "West Wing" ? (
-
- ) : (
-
- )}
-
*/}
);
diff --git a/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx b/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx
index 2306cd4..7c94ff9 100644
--- a/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx
+++ b/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx
@@ -1,48 +1,14 @@
-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