zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mouse move apartment desc + hightlighting

Browse Source
This commit is contained in:
zojgame
2024-06-05 12:01:10 +05:00
parent f1891f05d2
commit 152c46edf7
7 changed files with 118 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/complexWingPage/FloorDescription.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => {
</div>
</div> */}
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 delay-100 ${
className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
isSidebar && descriptionFloor?.wing === "West Wing"
? "opacity-100"
: "opacity-100"
src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
+20 -13
View File
@@ -1,20 +1,27 @@
import { useEffect } from "react";
interface ApartmentDescriptionProps {
isVisible?: boolean;
isVisible: boolean;
}
const ApartmentDescription = ({
isVisible = true,
}: ApartmentDescriptionProps) => {
const ApartmentDescription = ({ isVisible }: ApartmentDescriptionProps) => {
useEffect(() => {
console.log("isVisible", isVisible);
}, [isVisible]);
return (
<div
className={`bg-white rounded-lg shadow-xl p-6 flex flex-col text-subheadline-s relative ${
isVisible ? "opacity-100" : "opacity-0"
} duration-300 ease-in-out transition-opacity`}
>
<h2 className="text-[#0D1922] font-semibold pb-4 border-b">
1 bedroom, 609 Sqft
</h2>
<p className="font-semibold pt-4">AED 1,668,888</p>
<div className="p-6">
<div
className={`bg-white rounded-lg p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 ${
isVisible ? "opacity-100" : "opacity-0"
} duration-300 ease-in-out transition-opacity`}
>
<h2 className="text-[#0D1922] font-semibold pb-4 border-b">
1 bedroom, 609 Sqft
</h2>
<p className="font-semibold pt-4">AED 1,668,888</p>
<div className="w-0 h-0 border-transparent border-t-[14px] border-x-[6px] border-b-0 absolute left-6 -bottom-[13px] border-t-white"></div>
</div>
</div>
);
};
src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+44 -8
View File
@@ -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<number[]>([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 (
<div
className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
@@ -44,15 +71,24 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
<p>2 Bedroom</p>
</div>
</div>
{/* <div className="px-4 bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center items-center flex-1">
{currentFloor?.wing === "West Wing" ? (
<FloorWestWingLayout />
) : (
<FloorEastWingLayout />
)}
</div> */}
<div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center items-center flex-1 py-4">
<FloorWestWingLayout />
<div
className="absolute z-[99999] w-fit h-fit top-0 left-0 overflow-hidden"
style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
>
<ApartmentDescription isVisible={isDescVisible} />
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 645 269"
>
<FloorWestWingLayout />
<FloorWestWingHighlighting
handleOnMouseOut={handleOnMouseOut}
handleOnMouseOver={handleOnMouseOver}
/>
</svg>
</div>
</div>
);
src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx
+24 -58
View File
@@ -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<number[]>([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<SVGSVGElement, MouseEvent>
): void {
throw new Error("Function not implemented.");
}
function handleOnMouseOver(
event: MouseEvent<SVGSVGElement, MouseEvent>
): void {
console.log("event", event);
}
interface FloorWestWingHighlightingProps {
handleOnMouseOut: () => void;
handleOnMouseOver: () => void;
}
const FloorWestWingHighlighting = ({
handleOnMouseOut,
handleOnMouseOver,
}: FloorWestWingHighlightingProps) => {
return (
<>
<div
className="absolute z-[99999] w-fit h-fit top-0 left-0 overflow-hidden"
// style={{ top: `150px`, left: `100px` }}
style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
>
<ApartmentDescription isVisible={isDescVisible} />
</div>
,
{/* {createPortal(
document.body
)} */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="645"
@@ -51,7 +17,7 @@ const FloorWestWingHighlighting = () => {
viewBox="0 0 645 269"
>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={36}
@@ -75,7 +41,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={36}
@@ -99,7 +65,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={36}
@@ -123,7 +89,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={36}
@@ -147,7 +113,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={36}
@@ -171,7 +137,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={36}
@@ -195,7 +161,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={159}
@@ -219,7 +185,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={158}
@@ -243,7 +209,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={158}
@@ -267,7 +233,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={158}
@@ -291,7 +257,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={158}
@@ -315,7 +281,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
x={70}
@@ -339,7 +305,7 @@ const FloorWestWingHighlighting = () => {
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
xmlns="http://www.w3.org/2000/svg"
@@ -357,7 +323,7 @@ const FloorWestWingHighlighting = () => {
></path>
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
xmlns="http://www.w3.org/2000/svg"
@@ -387,7 +353,7 @@ const FloorWestWingHighlighting = () => {
></path>
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={35.26}
@@ -410,7 +376,7 @@ const FloorWestWingHighlighting = () => {
></path>
</svg>
<svg
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
onMouseOut={handleOnMouseOut}
onMouseOver={handleOnMouseOver}
y={158.26}
src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx
+1 -10
View File
File diff suppressed because one or more lines are too long
src/components/complexWingPage/SkygardenDescription.tsx
+24 -22
View File
@@ -1,31 +1,33 @@
const SkygardenDescription = () => {
return (
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px]`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out `}
>
Sky Garden
</p>
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
17 amenties
<div className=" p-6">
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px] desc-shadow`}
>
<div className="relative ">
<div className="flex justify-between border-b pb-4">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out `}
>
Sky Garden
</p>
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
17 amenties
</div>
</div>
</div>
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-[178px]">
<p className="text-s text-[#73787C] w-full">Indoor</p>
<p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
</div>
<div className="flex items-center justify-between">
<p className="text-s text-[#73787C]">Outdoor </p>
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-[178px]">
<p className="text-s text-[#73787C] w-full">Indoor</p>
<p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
</div>
<div className="flex items-center justify-between">
<p className="text-s text-[#73787C]">Outdoor </p>
<p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
<p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
</div>
</div>
<div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
</div>
<div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
</div>
</div>
);
src/index.css
+4
View File
@@ -18,6 +18,10 @@ html {
}
@layer components {
.desc-shadow {
box-shadow: 0px 4px 20px 1px #00000026;
}
.text-caption-s {
font-family: "Usual", sans-serif;
font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);