virtual page

src/pages/VirtualTour.tsx

@@ -1,14 +1,32 @@
+import { useState } from "react";
 import { Canvas } from "@react-three/fiber";
-import ButtomPanel from "../components/ButtomPanel";
 import VirtualTourWrapper from "../components/virtualTour/VirtualTourWrapper";
+import Button from "../components/Button";
+import HeartIcon from "../components/icons/Heart";
+import ChevronDownIcon from "../components/icons/ChevronDownIcon";
+import ButtomPanelCompass from "../components/ButtomPanelCompass";
+import BookingIcon from "../components/icons/BookingIcon";
+import { spheres } from "../consts/spheres";
+import { IAppartmentSphere } from "../types/apartmentSphere";
+import useSphere from "../store/useSphere";
 
 const VirtualTour = () => {
+  const [isActive, setIsActive] = useState(false);
+  const { setSelectedSphere } = useSphere();
+
+  const handleOnShowClick = () => {
+    setIsActive((prev) => !prev);
+  };
+
+  const handleOnLabelClick = (sphere: IAppartmentSphere) => {
+    setSelectedSphere(sphere);
+  };
+
   return (
     <div className="overflow-hidden h-screen w-screen">
-      {/* <TopPanel /> */}
       <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">
-          <div className="bg-white w-full rounded-lg p-4 flex flex-col">
+          <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">
                 Rove Home Marasi Drive{" "}
@@ -25,13 +43,94 @@ const VirtualTour = () => {
                 <p className="text-caption-m font-semibold leading-4">№ 213</p>
               </div>
             </div>
+            <div className="pt-3">
+              <div className="flex gap-2 items-center">
+                <div className="bg-[#00BED7] py-[3px] px-2 rounded-full text-white text-caption-m flex items-center h-[22px]">
+                  234
+                </div>
+                <p className="text-[#0D1922] font-semibold text-subheadline-s">
+                  1 bedroom appartment
+                </p>
+              </div>
+              <div
+                className={`transition-all duration-700 ease-in-out ${
+                  !isActive ? "max-h-0 opacity-0" : "max-h-screen opacity-100"
+                }`}
+              >
+                <div className="aspect-square w-full bg-black my-4"></div>
+                <div className="pt-4 border-t">
+                  <div className="flex flex-col gap-3">
+                    <div className="flex justify-between text-m">
+                      <p className="text-[#73787C]">Size</p>
+                      <p className="text-[#0D1922]">609 Sqft</p>
+                    </div>
+                    <div className="flex justify-between text-m">
+                      <p className="text-[#73787C]">Status</p>
+                      <p className="text-[#0D1922]">Available</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="flex gap-2 pt-6">
+                <Button
+                  icon={<BookingIcon />}
+                  text="Send Enquiry"
+                  buttonType="cta"
+                  className="flex-1 flex items-center justify-center"
+                />
+                <Button icon={<HeartIcon />} buttonType="secondary" />
+              </div>
+            </div>
+            <div className="h-14 absolute -bottom-14 left-0 w-full  flex justify-between">
+              <div className="flex gap-1 py-2 items-start flex-wrap">
+                {spheres.map((sphere) => {
+                  return (
+                    <div
+                      onClick={() => handleOnLabelClick(sphere)}
+                      className="bg-[#F3F3F2] font-semibold text-[#0D1922] text-caption-s py-0.5 px-2 w-fit rounded-full cursor-pointer pointer-events-auto select-none"
+                      key={sphere.id}
+                    >
+                      {sphere.roomType}
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="transition-all duration-300 bg-[#FFFFFFCC] px-4 py-3 w-fit h-12 rounded-ee-lg rounded-es-lg select-none cursor-pointer pointer-events-auto items-start border border-t-[#0D1922B2] active:border-[#00BED7] hover:bg-[#FFFFFF] text-[#0D1922B2] hover:text-[#0D1922]">
+                <div
+                  className="flex justify-center items-center gap-2"
+                  onClick={handleOnShowClick}
+                >
+                  <div className="relative">
+                    <div
+                      className={`transition-opacity duration-300 ${
+                        !isActive ? "opacity-100" : "opacity-0"
+                      }`}
+                    >
+                      Show
+                    </div>
+                    <div
+                      className={`transition-opacity duration-300 absolute top-0 ${
+                        !isActive ? "opacity-0" : "opacity-100"
+                      }`}
+                    >
+                      Hide
+                    </div>
+                  </div>
+                  <ChevronDownIcon
+                    className={`transition-all duration-300 ${
+                      !isActive ? "rotate-0" : "rotate-180"
+                    }`}
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
       <Canvas>
         <VirtualTourWrapper />
       </Canvas>
-      <ButtomPanel />
+      <ButtomPanelCompass />
     </div>
   );
 };