sequence wing page

2024-05-03 18:07:32 +05:00
parent b88b06d50b
commit ed29a88998
13 changed files with 535 additions and 82 deletions
@@ -0,0 +1,43 @@
+import useModal from "../store/useModal";
+import useSequence from "../store/useSequence";
+import Button from "./Button";
+import DisclaimerIcon from "./icons/DisclaimerIcon";
+import DisclaimerModal from "./modals/DisclaimerModal";
+
+const ComplexButtomPanel = () => {
+  const { setModal } = useModal();
+  const { currentCompassRotate } = useSequence();
+
+  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="tertiary"
+            className="pl-2"
+            icon={<DisclaimerIcon />}
+            onClick={handleOnDisclaimerClick}
+          />
+          <Button text="Privacy Policy" buttonType="tertiary" />
+        </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="transition-transform duration-[750ms] ease-in-out"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ComplexButtomPanel;