54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Html } from "@react-three/drei";
|
|
import { IAppartmentSphere, ISphereLink } from "../../types/apartmentSphere";
|
|
import WalkHereIcon from "../icons/WalkHereIcon";
|
|
import useSphere from "../../store/useSphere";
|
|
|
|
interface LaberlMarkerProps {
|
|
sphereLink: ISphereLink;
|
|
apartment: IAppartmentSphere;
|
|
}
|
|
|
|
const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
|
|
const { setSelectedSphere } = useSphere();
|
|
const currentSphere = apartment.spheres.find(
|
|
(sphere) => sphereLink.id === sphere.id
|
|
);
|
|
|
|
const handleOnClick = () => {
|
|
const moveToShpere = apartment.spheres.find(
|
|
(sph) => sph.id === sphereLink.id
|
|
);
|
|
if (moveToShpere) {
|
|
setSelectedSphere(moveToShpere);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{
|
|
<Html position={sphereLink.labelPosition} center>
|
|
<div className="relative">
|
|
<div
|
|
className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
|
|
onClick={handleOnClick}
|
|
>
|
|
<WalkHereIcon />
|
|
</div>
|
|
<div className="absolute -left-[66px] bottom-11 bg-[#0D192266] w-[168px] h-[121px] rounded-lg flex flex-col p-1 gap-1 items-center opacity-0 peer-hover:opacity-100 duration-300 ease-in-out transition-opacity">
|
|
<div className="bg-[#D9D9D9] rounded-lg w-full h-full object-contain overflow-clip">
|
|
<img
|
|
src="/images/virtual-tour/studio1/previews/preview.jpg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div className="text-white ">{currentSphere?.roomType}</div>
|
|
</div>
|
|
</div>
|
|
</Html>
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LabelMarker;
|