From c8ef3a551f741a1435e7f507e17a5f4724f72d7b Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Mon, 8 Apr 2024 11:24:03 +0500
Subject: [PATCH] changed distance circle to svg

---
 src/components/DistanceCircle.tsx | 43 +++++++++++++++++++++++++++++++
 src/pages/InfrastructurePage.tsx  | 12 +++------
 2 files changed, 46 insertions(+), 9 deletions(-)
 create mode 100644 src/components/DistanceCircle.tsx

diff --git a/src/components/DistanceCircle.tsx b/src/components/DistanceCircle.tsx
new file mode 100644
index 0000000..97f6776
--- /dev/null
+++ b/src/components/DistanceCircle.tsx
@@ -0,0 +1,43 @@
+interface DistanceCircleProps {
+  selectedRange: number;
+}
+
+const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
+  return (
+    <svg
+      className="z-50 transition-transform duration-300 ease-in-out"
+      style={{ transform: `scale(${(selectedRange * 0.75) / 800})` }}
+      width="1600"
+      height="1600"
+      viewBox="0 0 1600 1600"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="800"
+        cy="800"
+        r="798.5"
+        fill="url(#paint0_radial_193_12559)"
+        fillOpacity="0.6"
+        stroke="white"
+        strokeWidth={(3 * 800) / selectedRange}
+      />
+      <defs>
+        <radialGradient
+          id="paint0_radial_193_12559"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(800 800) rotate(90) scale(800)"
+        >
+          <stop stopColor="#0079C2" stop-opacity="0" />
+          <stop offset="0.82" stopColor="#0079C2" stop-opacity="0.08" />
+          <stop offset="1" stopColor="#0079C2" />
+        </radialGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default DistanceCircle;
diff --git a/src/pages/InfrastructurePage.tsx b/src/pages/InfrastructurePage.tsx
index 1cd40e4..9756b45 100644
--- a/src/pages/InfrastructurePage.tsx
+++ b/src/pages/InfrastructurePage.tsx
@@ -3,21 +3,15 @@ import Button from "../components/Button";
 import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
 import CrossIcon from "../icons/CrossIcon";
 import InfrastructureFilters from "../components/InfrastructurePage/InfrastructureFilters";
+import DistanceCircle from "../components/DistanceCircle";
 
 function InfrastructurePage() {
   const [selectedRange, setSelectedRange] = useState<number>(800);
 
   return (
     <div className="h-screen overflow-hidden">
-      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
-        <div
-          className="rounded-full h-[3700px] border-[3px] bg-black z-50 aspect-square transition-transform duration-300 ease-in-out"
-          style={{
-            background: "radial-gradient(transparent 60%, #0079C2 100%)",
-            transform: `scale(${selectedRange / 800})`,
-            borderWidth: `${3 * (2 - selectedRange / 800)}px`,
-          }}
-        ></div>
+      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center overflow-clip">
+        <DistanceCircle selectedRange={selectedRange} />
       </div>
       <div className="absolute h-full top-0 left-0 z-[99999999] w-[260px] bg-[#002347] bg-opacity-90 select-none px-6 py-5 flex flex-col justify-between gap-8">
         <div className="flex flex-col gap-3">