filters + fullscreen + components

2024-04-27 18:30:04 +05:00
parent c26d766429
commit 17aea1fff1
27 changed files with 632 additions and 79 deletions
@@ -0,0 +1,48 @@
+import Button from "./Button";
+import DisclaimerIcon from "./icons/DisclaimerIcon";
+import useModal from "../store/useModal";
+import DisclaimerModal from "./modals/DisclaimerModal";
+
+const ButtomPanel = () => {
+  const { setModal } = useModal();
+  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 flex-col w-[325px] pl-6 pr-3 py-2 bg-[#00000033]">
+          <div className="flex gap-1">
+            <DisclaimerIcon />
+            <p className="text-s text-white">Work in progress</p>
+          </div>
+          <div className="text-white text-caption-m font-semibold opacity-80">
+            Mockups are in the early stages of development and may differ
+            significantly from the final version.
+          </div>
+        </div> */}
+        <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
+            src="./images/masterplan/compass.png"
+            alt="compass"
+            className=""
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ButtomPanel;