44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import useModal from "../store/useModal";
|
|
import useCompass from "../store/useCompass";
|
|
import Button from "./Button";
|
|
import DisclaimerIcon from "./icons/DisclaimerIcon";
|
|
import DisclaimerModal from "./modals/DisclaimerModal";
|
|
|
|
const ButtomPanelCompass = () => {
|
|
const { setModal } = useModal();
|
|
const { currentCompassRotate } = useCompass();
|
|
|
|
const handleOnDisclaimerClick = () => {
|
|
setModal(<DisclaimerModal />);
|
|
};
|
|
|
|
return (
|
|
<div className="absolute bottom-0 left-0 z-20 flex items-end justify-between w-full gap-2 pointer-events-none select-none touch-none">
|
|
<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 max-sm:hidden">
|
|
<div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
|
|
<img
|
|
style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }}
|
|
src="/images/masterplan/compass.png"
|
|
alt="compass"
|
|
className="transition-transform duration-[750ms] ease-in-out"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ButtomPanelCompass;
|