IRTH-Touch/src/pages/VirtualTour.tsx

import { useState } from "react";
import { Canvas } from "@react-three/fiber";
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">
      <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-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{" "}
              </p>
              <div className="text-[#73787C] flex gap-2 items-center w-fit">
                <p className="text-caption-m font-semibold leading-4">
                  East Wing
                </p>
                <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
                <p className="text-caption-m font-semibold leading-4">
                  Floor 11
                </p>
                <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
                <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>
      <ButtomPanelCompass />
    </div>
  );
};

export default VirtualTour;