Merge branch 'main' of http://192.168.1.163:3000/inmake/nks-virtual-tour

src/components/DistanceCircle.tsx

@@ -1,23 +1,29 @@
+import { useLayoutEffect, useState } from "react";
+
 interface DistanceCircleProps {
   selectedRange: number;
 }
 
+const defaultScreenSize = 2150;
+
 const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
+  const [screenWidth, setScreenWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    const _screenWidth = window.innerWidth;
+    setScreenWidth(_screenWidth);
+  }, [setScreenWidth]);
+
   return (
-    <svg
-      width="2160"
-      height="2160"
-      viewBox="0 0 2160 2160"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="absolute top-0 left-0 w-full h-full transition-all duration-300 ease-in-out"
-    >
+    <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
       <svg
         className="transition-all duration-300 ease-in-out"
-        width={(0.8 * 1600 * selectedRange) / 850}
+        width={
+          ((screenWidth / defaultScreenSize) * (0.8 * 1600 * selectedRange)) /
+          850
+        }
         x={1080 - (0.8 * 1600 * selectedRange) / 1700}
         y={0}
-        style={{ transition: "all .3s ease" }}
         viewBox="0 0 1600 1600"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -46,7 +52,7 @@ const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
           </radialGradient>
         </defs>
       </svg>
-    </svg>
+    </div>
   );
 };