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,103 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import useModal from "../store/useModal";
+import Button from "./Button";
+import FilterIcon from "./icons/FilterIcon";
+import HintIcon from "./icons/HintIcon";
+import LeftArrowSliderIcon from "./icons/LeftArrowSliderIcon";
+import ResizeIcon from "./icons/ResizeIcon";
+import HelpModal from "./modals/HelpModal";
+import MasterplanFilters from "./modals/MasterplanFilters";
+import InfoIcon from "./icons/InfoIcon";
+import useFullScreen from "../store/useFullScreen";
+import ActiveResizeIcon from "./icons/ActiveResizeIcon";
+
+const ComplexTopPanel = () => {
+  const [isFullMode, setIsFullMode] = useState(false);
+  const { setModal } = useModal();
+  const { onFullscreen } = useFullScreen();
+  const navigate = useNavigate();
+
+  const handleOnHelpClick = () => {
+    setModal(<HelpModal />);
+  };
+
+  const handleOnFiltersClick = () => {
+    setModal(<MasterplanFilters />);
+  };
+
+  const handleOnBackClick = () => {
+    navigate(-1);
+  };
+
+  const handleOnFullScreenClick = () => {
+    if (!onFullscreen) return;
+
+    setIsFullMode((prev) => !prev);
+    if (!isFullMode) {
+      onFullscreen.enter();
+    } else {
+      onFullscreen.exit();
+    }
+  };
+
+  return (
+    <>
+      <div className="absolute top-0 w-screen z-20 select-none pointer-events-none">
+        <img src="../images/top_shadow.png" className="w-screen" alt="" />
+      </div>
+      <div
+        className={`absolute top-[62px] left-0 z-20 w-full p-4 grid grid-cols-12 select-none touch-none pointer-events-none`}
+      >
+        <div className="flex gap-2 col-span-3">
+          <Button
+            icon={<LeftArrowSliderIcon />}
+            buttonType="cta"
+            onClick={handleOnBackClick}
+          />
+          <Button
+            icon={<FilterIcon />}
+            buttonType="primary"
+            text="Filters"
+            onClick={handleOnFiltersClick}
+          />
+          <Button
+            icon={<InfoIcon />}
+            buttonType="primary"
+            text="About Complex"
+          />
+        </div>
+        <div className="flex flex-col col-start-6 col-span-2 text-white text-center">
+          <h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
+            ROVE Home Marasi Drive
+          </h2>
+          <p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
+            Select a wing
+          </p>
+        </div>
+        <div className="flex gap-2 col-span-2 col-start-11 justify-end">
+          {isFullMode ? (
+            <Button
+              buttonType="fab"
+              icon={<ActiveResizeIcon />}
+              onClick={handleOnFullScreenClick}
+            />
+          ) : (
+            <Button
+              buttonType="fab"
+              icon={<ResizeIcon />}
+              onClick={handleOnFullScreenClick}
+            />
+          )}
+          <Button
+            buttonType="fab"
+            icon={<HintIcon />}
+            onClick={handleOnHelpClick}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ComplexTopPanel;