From 5c9dda9cac13b5c8017e7a09a3f8317ae9d43c7c Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Wed, 21 Jan 2026 16:28:02 +0500
Subject: [PATCH] virtual tours switching

---
 src/components/pages/BlockPage.tsx       |  2 +-
 src/components/pages/VirtualTourPage.tsx | 45 +++++++++++++++++-------
 src/main.tsx                             |  4 ---
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/BlockPage.tsx b/src/components/pages/BlockPage.tsx
index 8eab1bd..1905ace 100644
--- a/src/components/pages/BlockPage.tsx
+++ b/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">
diff --git a/src/components/pages/VirtualTourPage.tsx b/src/components/pages/VirtualTourPage.tsx
index 500a5fb..8358c27 100644
--- a/src/components/pages/VirtualTourPage.tsx
+++ b/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 = "/";
diff --git a/src/main.tsx b/src/main.tsx
index d577bc2..6d997e5 100644
--- a/src/main.tsx
+++ b/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 /> }],
   },