marks

src/components/Mark.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { Mark as MarkType } from "../types/Mark";
+
+interface MarkProps {
+  isFiltered: boolean;
+  mark: MarkType;
+  width: number;
+  height: number;
+  icon: React.ReactNode;
+}
+
+const Mark = ({ isFiltered, width, height, icon, mark }: MarkProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  function handleOnMouseEnter(): void {
+    setIsHovered(true);
+  }
+
+  function handleOnMouseLeave(): void {
+    setIsHovered(false);
+  }
+
+  return (
+    <svg
+      onMouseEnter={handleOnMouseEnter}
+      onMouseLeave={handleOnMouseLeave}
+      className={`transition-all duration-300 ease-in-out relative ${
+        isFiltered ? "opacity-100" : "opacity-0"
+      }`}
+      //   x={mark.x - 100 + 82}
+      x={mark.x - 100 + 32}
+      y={mark.y}
+      width={width + 200}
+      height={height}
+      //   viewBox="0 0 256 64"
+      viewBox="0 0 128 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" x={width / 2}>
+        <g>
+          <rect
+            x="0"
+            y="0"
+            width="100"
+            height="100"
+            fill="white"
+            className="transition-all duration-300 ease-in-out"
+            style={{ width: `${isHovered ? "100%" : 0}` }}
+          ></rect>
+          <text x="0" y="50" fontFamily="Inter" fontSize="12" fill="#002347">
+            {mark.label}
+          </text>
+        </g>
+      </svg>
+      <rect width="64" height="64" rx="32" fill="white" />
+      <rect
+        x="3.55566"
+        y="3.55566"
+        width="56.8889"
+        height="56.8889"
+        rx="28.4444"
+        fill="#002347"
+      />
+      {icon}
+    </svg>
+    // <svg
+    //   onMouseEnter={handleOnMouseEnter}
+    //   onMouseLeave={handleOnMouseLeave}
+    //   className={`transition-all duration-300 ease-in-out relative ${
+    //     isFiltered ? "opacity-100" : "opacity-0"
+    //   }`}
+    //   x={x}
+    //   y={y}
+    //   width={width}
+    //   height={height}
+    //   viewBox="0 0 64 64"
+    //   fill="none"
+    //   xmlns="http://www.w3.org/2000/svg"
+    // >
+    //   <rect width="64" height="64" rx="32" fill="white" />
+    //   <rect
+    //     x="3.55566"
+    //     y="3.55566"
+    //     width="56.8889"
+    //     height="56.8889"
+    //     rx="28.4444"
+    //     fill="#002347"
+    //   />
+    //   {icon}
+    // </svg>
+  );
+};
+
+export default Mark;

src/components/MarksContainer.tsx

@@ -1,4 +1,5 @@
-import { Mark } from "../types/Mark";
+import Mark from "./Mark";
+import { Mark as MarkType } from "../types/Mark";
 import MarkEducationIcon from "./icons/marks/MarkEducationIcon";
 import MarkFoodIcon from "./icons/marks/MarkFoodIcon";
 import MarkHeathyIcon from "./icons/marks/MarkHeathyIcon";
@@ -14,8 +15,8 @@ const markIcons: { [key: string]: React.ReactNode } = {
 };
 
 interface MarksContainerProps {
-  marks: Mark[];
-  filteredMarks: Mark[];
+  marks: MarkType[];
+  filteredMarks: MarkType[];
   markWidth?: number;
   markHeigth?: number;
 }
@@ -33,37 +34,22 @@ function MarksContainer({
       viewBox="0 0 2160 2160"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="absolute top-0 left-0 w-full h-full"
+      className="absolute z-50 top-0 left-0 w-full h-full"
     >
       {marks.map((mark) => {
-        const isFiltered = filteredMarks.find(
+        const isFiltered = filteredMarks.some(
           (filteredMark) => filteredMark.id === mark.id
         );
 
         return (
-          <svg
-            className={`transition-all duration-300 ease-in-out ${
-              isFiltered ? "opacity-100" : "opacity-0"
-            }`}
-            x={mark.x}
-            y={mark.y}
+          <Mark
+            mark={mark}
+            key={mark.id}
+            isFiltered={isFiltered}
             width={markWidth}
             height={markHeigth}
-            viewBox="0 0 64 64"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect width="64" height="64" rx="32" fill="white" />
-            <rect
-              x="3.55566"
-              y="3.55566"
-              width="56.8889"
-              height="56.8889"
-              rx="28.4444"
-              fill="#002347"
-            />
-            {markIcons[mark.icon]}
-          </svg>
+            icon={markIcons[mark.icon]}
+          />
         );
       })}
     </svg>

src/marks.json

@@ -534,21 +534,5 @@
     "y": 1200,
     "icon": "sport",
     "distance": 700
-  },
-  {
-    "id": "sport_15",
-    "label": "Bright Fit",
-    "x": 1540,
-    "y": 1200,
-    "icon": "sport",
-    "distance": 700
-  },
-  {
-    "id": "sport_16",
-    "label": "Bright Fit",
-    "x": 1540,
-    "y": 1200,
-    "icon": "sport",
-    "distance": 700
   }
 ]