virtual tours switching

src/components/pages/BlockPage.tsx

@@ -213,7 +213,7 @@ function BlockPage() {
       </div>
       <UnitFilters className="2xl:!top-[4.444vw] md:!top-16 !top-[60px]" />
       <Link
-        to={`/virtual-tour/${blockNumber}`}
+        to={"/virtual-tour"}
         className="absolute 2xl:left-[1.111vw] md:left-4 left-3 2xl:top-[7.778vw] md:top-[112px] top-[108px]"
       >
         <Button variant="cta">

src/components/pages/VirtualTourPage.tsx

@@ -1,28 +1,49 @@
-import { Link, useParams } from "react-router";
+import { useNavigate } from "react-router";
 import Button from "../ui/Button";
 import ChevronLeftIcon from "../icons/ChevronLeftIcon";
+import { useState } from "react";
+import clsx from "clsx";
 
 function VirtualTourPage() {
-  const { blockNumber } = useParams();
+  const [unitType, setUnitType] = useState<"studio" | "1-bedroom">("studio");
+
+  const navigate = useNavigate();
 
   return (
     <div className="relative size-full">
       <iframe
+        key={unitType}
         className="absolute inset-0 size-full"
-        src={`/virtual-tours/B${blockNumber}/index.html`}
+        src={`/virtual-tours/${unitType}/index.html`}
       />
-      <Link
-        to={"/blocks/" + blockNumber}
+      <Button
+        variant="primary"
+        onClick={() => navigate(-1)}
         className="absolute 2xl:top-[1.111vw] top-4 2xl:left-[1.111vw] left-4"
       >
-        <Button variant="primary">
-          <div className="2xl:size-[1.111vw] size-4">
-            <ChevronLeftIcon />
-          </div>
-          <span className="max-md:hidden">Baraha Town</span>
+        <div className="2xl:size-[1.111vw] size-4">
+          <ChevronLeftIcon />
+        </div>
+        <span className="max-md:hidden">Baraha Town</span>
+      </Button>
+      <div className="absolute left-1/2 -translate-x-1/2 2xl:top-[1.111vw] md:top-4 top-3 flex 2xl:gap-[0.556vw] gap-2">
+        <Button
+          variant="primary"
+          onClick={() => setUnitType("studio")}
+          className={clsx(unitType === "studio" && "!bg-[#F47F52] !text-white")}
+        >
+          Studio
         </Button>
-      </Link>
-      <div className="absolute left-1/2 -translate-x-1/2 2xl:top-[1.111vw] md:top-4 top-3 flex 2xl:gap-[0.556vw] gap-2"></div>
+        <Button
+          variant="primary"
+          onClick={() => setUnitType("1-bedroom")}
+          className={clsx(
+            unitType === "1-bedroom" && "!bg-[#F47F52] !text-white"
+          )}
+        >
+          1-bedroom
+        </Button>
+      </div>
       <div
         onClick={() => {
           window.location.href = "/";

src/main.tsx

@@ -57,10 +57,6 @@ const router = createBrowserRouter([
   },
   {
     path: "/virtual-tour",
-    element: <Navigate to="/" replace />,
-  },
-  {
-    path: "/virtual-tour/:blockNumber",
     element: <EmptyLayout />,
     children: [{ index: true, element: <VirtualTourPage /> }],
   },