Infrasrtucture Page

2024-04-04 11:58:57 +05:00
parent 14556fab9a
commit 66827e486c
1 changed files with 58 additions and 0 deletions
@@ -0,0 +1,58 @@
+import { useRef, useState } from "react";
+import Button from "../components/Button";
+import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+import FullscreenIcon from "../components/icons/FullscreenIcon";
+import { useFullscreen } from "ahooks";
+import WindowModeIcon from "../components/icons/WindowModeIcon";
+import _images from "../images.json";
+import Image from "../types/Image";
+
+const images = _images as Image[];
+
+const InfrastructurePage = () => {
+  const [selectedImageId, setSelectedImageId] = useState<string>(images[0].id);
+  const fullscreenRef = useRef<HTMLDivElement>(null);
+  const [isFullscreen, { toggleFullscreen }] = useFullscreen(fullscreenRef);
+
+  return (
+    <div ref={fullscreenRef} className="h-screen bg-black">
+      <div className="absolute h-full top-0 left-0 z-[99999999] w-[260px] bg-[#002347] bg-opacity-90 select-none p-8 flex flex-col justify-between gap-8">
+        <div className="flex flex-col gap-8">
+          {selectedImageId.includes("Dvor") && (
+            <>
+              <h2 className="font-tenor text-2xl">
+                Внутренний
+                <br />
+                двор
+              </h2>
+              <img src="/images/maps/Stilobat.svg" alt="" />
+            </>
+          )}
+          {selectedImageId.includes("Lobby_1") && (
+            <>
+              <h2 className="font-tenor text-2xl">Лобби</h2>
+              <img src="/images/maps/Lobby.svg" alt="" />
+            </>
+          )}
+          {selectedImageId.includes("Lobby_2") && (
+            <>
+              <h2 className="font-tenor text-2xl">Лобби</h2>
+              <img src="/images/maps/Lobby.svg" alt="" />
+            </>
+          )}
+        </div>
+        <Button text="Генплан" icon={<ArrowLeftIcon />} widthFull />
+      </div>
+
+      <div className="absolute top-0 right-0 z-[99999999] px-10 py-6 select-none">
+        <Button
+          text="Во весь экран"
+          icon={isFullscreen ? <WindowModeIcon /> : <FullscreenIcon />}
+          onClick={toggleFullscreen}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default InfrastructurePage;