top panel virtual tour

src/components/virtualTour/VirtualTourTopPanel.tsx

@@ -0,0 +1,87 @@
+import { useNavigate } from "react-router-dom";
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import HintIcon from "../icons/HintIcon";
+import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
+import ResizeIcon from "../icons/ResizeIcon";
+import HelpModal from "../modals/HelpModal";
+import InfoIcon from "../icons/InfoIcon";
+import useFullScreen from "../../store/useFullScreen";
+import ActiveResizeIcon from "../icons/ActiveResizeIcon";
+import useWingSidebar from "../../store/useWingSidebar";
+
+const VirtualTourTopPanel = () => {
+  const { setModal } = useModal();
+  const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
+  const { setIsSidebar, isSidebar } = useWingSidebar();
+  const navigate = useNavigate();
+
+  const handleOnHelpClick = () => {
+    setModal(<HelpModal />);
+  };
+
+  const handleOnBackClick = () => {
+    if (isSidebar) {
+      setIsSidebar(false);
+    } else {
+      navigate(-1);
+    }
+  };
+
+  const handleOnFullScreenClick = () => {
+    if (!onFullscreen) return;
+
+    setIsFullscreen(!isFullscreen);
+    if (!isFullscreen) {
+      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-5">
+          <Button
+            icon={<LeftArrowSliderIcon />}
+            buttonType="cta"
+            onClick={handleOnBackClick}
+          />
+          <Button
+            icon={<InfoIcon />}
+            buttonType="primary"
+            text="About Complex"
+          />
+        </div>
+        <div className="flex gap-2 col-span-1 col-start-12 justify-end">
+          {isFullscreen ? (
+            <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 VirtualTourTopPanel;

src/pages/VirtualTour.tsx

@@ -10,6 +10,9 @@ import { IAppartmentSphere, ISphere } from "../types/apartmentSphere";
 import useSphere from "../store/useSphere";
 import { useParams } from "react-router-dom";
 import _appartment from "../data/appartment.json";
+import ButtonPanel from "../components/searchApartment/ButtonPanel";
+import TopPanel from "../components/masterplanPage/TopPanel";
+import VirtualTourTopPanel from "../components/virtualTour/VirtualTourTopPanel";
 
 const appartments = _appartment as IAppartmentSphere[];
 
@@ -39,8 +42,9 @@ const VirtualTour = () => {
 
   return (
     <div className="overflow-hidden h-screen w-screen">
-      <div className="absolute w-screen h-screen grid grid-cols-12 z-30 pointer-events-none">
-        <div className="col-span-3 h-screen py-[68px] px-3">
+      <VirtualTourTopPanel />
+      <div className="absolute w-screen h-screen grid grid-cols-12 z-[99999999] pointer-events-none">
+        <div className="col-span-3 h-screen py-[130px] px-3">
           <div className="bg-white w-full rounded-lg p-5 flex flex-col relative rounded-ee-none">
             <div className="flex flex-col gap-1 pb-[18px] border-b">
               <p className="text-[#00BED7] text-caption-m font-medium">