44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import useCompass from "../../store/useCompass";
|
|
import useModal from "../../store/useModal";
|
|
import Button from "../Button";
|
|
import DisclaimerIcon from "../icons/DisclaimerIcon";
|
|
import DisclaimerModal from "../modals/DisclaimerModal";
|
|
|
|
const ButtomPanelCompassVirtualTour = () => {
|
|
const { setModal } = useModal();
|
|
const { currentCompassRotate } = useCompass();
|
|
|
|
const handleOnDisclaimerClick = () => {
|
|
setModal(<DisclaimerModal />);
|
|
};
|
|
|
|
return (
|
|
<div className="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex gap-2 pb-6 pl-6">
|
|
<Button
|
|
text="Disclaimer"
|
|
buttonType="special"
|
|
className="pl-2"
|
|
icon={<DisclaimerIcon />}
|
|
onClick={handleOnDisclaimerClick}
|
|
/>
|
|
<Button text="Privacy Policy" buttonType="special" />
|
|
</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
|
|
<img
|
|
style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }}
|
|
src="/images/masterplan/compass.png"
|
|
alt="compass"
|
|
className=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ButtomPanelCompassVirtualTour;
|