filters + fullscreen + components

2024-04-27 18:30:04 +05:00
parent c26d766429
commit 17aea1fff1
27 changed files with 632 additions and 79 deletions
@@ -1,3 +1,5 @@
+import { useState } from "react";
+import useFullScreen from "../../store/useFullScreen";
 import useModal from "../../store/useModal";
 import Button from "../Button";
 import HintIcon from "../icons/HintIcon";
@@ -5,15 +7,32 @@ import ResizeIcon from "../icons/ResizeIcon";
 import HelpModal from "../modals/HelpModal";

 const TopPanel = () => {
+  const [isFullMode, setIsFullMode] = useState(false);
  const { setModal } = useModal();
+  const { onFullscreen } = useFullScreen();

  const handleOnHelpClick = () => {
    setModal(<HelpModal />);
  };

+  const handleOnFullScreenClick = () => {
+    if (!onFullscreen) return;
+
+    setIsFullMode((prev) => !prev);
+    if (!isFullMode) {
+      onFullscreen.enter();
+    } else {
+      onFullscreen.exit();
+    }
+  };
+
  return (
    <div className="absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2">
-      <Button buttonType="fab" icon={<ResizeIcon />} />
+      <Button
+        buttonType="fab"
+        icon={<ResizeIcon />}
+        onClick={handleOnFullScreenClick}
+      />
      <Button
        buttonType="fab"
        icon={<HintIcon />}