animate distance circle

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>
   );
 };
 

src/components/InfrastructurePage/InfrastructureFilters.tsx

@@ -34,7 +34,6 @@ const InfrastructureFilters = ({
     const filteredMarks = marks.filter(
       (mark) => mark.icon === filter && mark.distance <= selectedRange
     );
-    console.log("filteredMarks", filteredMarks);
 
     setFilteredMarks(filteredMarks);
   }, [selectedRange, filter, marks, setFilteredMarks]);
@@ -42,9 +41,12 @@ const InfrastructureFilters = ({
   return (
     <>
       <div>
-        <h2 className="font-tenor text-2xl mb-8">Инфраструктура</h2>
-        <h3 className="text-[18px] mb-5">Окружение:</h3>
-        <div className="flex flex-col gap-2 mb-8 border-b border-[#9595A2] pb-8">
+        {/* <h2 className="font-tenor 2xl:text-2xl text-xl 2xl:mb-8 mb-5"> */}
+        <h2 className="font-tenor text-xl  mb-5">Инфраструктура</h2>
+        {/* <h3 className="text-[18px] 2xl:mb-5 mb-3">Окружение:</h3> */}
+        <h3 className="text-[18px] mb-3">Окружение:</h3>
+        {/* <div className="flex flex-col 2xl:gap-2 gap-[6px] 2xl:mb-8 mb-5 border-b border-[#9595A2] 2xl:pb-8 pb-5"> */}
+        <div className="flex flex-col 2xl:gap-2 gap-[6px] mb-5 border-b border-[#9595A2] pb-5">
           {environments.map((env) => (
             <button
               data-set={env.type}
@@ -54,15 +56,15 @@ const InfrastructureFilters = ({
                 filter !== env.type
                   ? "opacity-60 border-b-2 border-b-transparent"
                   : "border-b-2 border-b-[#0079C2]"
-              } flex gap-2 font-medium text-sm px-[2px] py-2 transition-all duration-300 ease-in-out`}
+              } flex gap-2 font-medium 2xl:text-sm xl:text-xs px-[2px] py-2 transition-all duration-300 ease-in-out`}
             >
               {env.icon}
               <div>{env.label}</div>
             </button>
           ))}
         </div>
-        <div className="flex flex-col gap-2 border-b border-[#9595A2] pb-8">
-          <h3 className="text-[18px] mb-5">Транспорт:</h3>
+        <div className="flex flex-col gap-2 border-b border-[#9595A2] 2xl:pb-8 pb-5">
+          <h3 className="text-[18px] 2xl:mb-5 mb-3">Транспорт:</h3>
           {transports.map((trans) => (
             <button
               data-set={trans.type}

src/components/MarksContainer.tsx

@@ -3,12 +3,14 @@ import MarkEducationIcon from "./icons/marks/MarkEducationIcon";
 import MarkFoodIcon from "./icons/marks/MarkFoodIcon";
 import MarkHeathyIcon from "./icons/marks/MarkHeathyIcon";
 import MarkShopIcon from "./icons/marks/MarkShopIcon";
+import { MarkSportIcon } from "./icons/marks/MarkSportIcon";
 
 const markIcons: { [key: string]: React.ReactNode } = {
   shop: <MarkShopIcon />,
   food: <MarkFoodIcon />,
   heathy: <MarkHeathyIcon />,
   education: <MarkEducationIcon />,
+  sport: <MarkSportIcon />,
 };
 
 interface MarksContainerProps {

src/components/icons/marks/MarkSportIcon.tsx

@@ -0,0 +1,28 @@
+const MarkSportIcon = () => {
+  return (
+    <svg
+      x={9.5}
+      y={9.5}
+      width="45"
+      height="45"
+      viewBox="0 0 45 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_177_12572)">
+        <path
+          d="M18.5222 26.4775L26.4772 18.5226M34.631 10.3688L36.6198 8.38002M8.37968 36.6201L10.3684 34.6314M18.5222 8.97656L24.8862 2.61267L42.3871 20.1136L36.0231 26.4775L18.5222 8.97656ZM2.61233 24.8865L8.97629 18.5226L26.4772 36.0235L20.1132 42.3874L2.61233 24.8865Z"
+          stroke="white"
+          stroke-width="2.8125"
+          stroke-linecap="square"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_177_12572">
+          <rect width="45" height="45" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+export { MarkSportIcon };