From 66827e486c873df9d09ceba87f660d1c7848a0b5 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Thu, 4 Apr 2024 11:58:57 +0500
Subject: [PATCH] Infrasrtucture Page

---
 src/pages/InfrastructurePage.tsx | 58 ++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/pages/InfrastructurePage.tsx

diff --git a/src/pages/InfrastructurePage.tsx b/src/pages/InfrastructurePage.tsx
new file mode 100644
index 0000000..01f2cc3
--- /dev/null
+++ b/src/pages/InfrastructurePage.tsx
@@ -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;