marks icon

src/components/Mark.tsx

@@ -1,39 +1,5 @@
-// import { useLayoutEffect, useState } from "react";
-
-interface MarkProps {
-  x: number;
-  y: number;
-}
-
-function Mark({ x, y }: MarkProps) {
-  return (
-    <svg className="w-full h-full">
-      <rect
-        width="36"
-        height="36"
-        rx="18"
-        fill="white"
-        x={x}
-        y={y}
-        // style={{ transform: `scaleX(calc(${screenWidth}/1600px))` }}
-      />
-      <rect
-        x={x + 2}
-        y={y + 2}
-        width="32"
-        height="32"
-        rx="16"
-        fill="#002347"
-        // style={{ transform: "scale(calc(100vw/1600px),calc(100vh/900px))" }}
-      />
-      {/* <path
-        d="M15 14H13.5C12.6716 14 12 14.6716 12 15.5V23.5C12 24.3284 12.6716 25 13.5 25H22.5C23.3284 25 24 24.3284 24 23.5V15.5C24 14.6716 23.3284 14 22.5 14H21M15 14V16.5M15 14H21M15 14V13C15 12.606 15.0776 12.2159 15.2284 11.8519C15.3791 11.488 15.6001 11.1573 15.8787 10.8787C16.1573 10.6001 16.488 10.3791 16.8519 10.2284C17.2159 10.0776 17.606 10 18 10C18.394 10 18.7841 10.0776 19.1481 10.2284C19.512 10.3791 19.8427 10.6001 20.1213 10.8787C20.3999 11.1573 20.6209 11.488 20.7716 11.8519C20.9224 12.2159 21 12.606 21 13V14M21 14V16.5"
-        stroke="white"
-        strokeWidth="1.66667"
-        strokeLinecap="square"
-      /> */}
-    </svg>
-  );
+function Mark() {
+  return <div>Mark</div>;
 }
 
 export default Mark;

src/components/MarksContainer.tsx

@@ -0,0 +1,69 @@
+import MarkShopIcon from "./icons/marks/MarkShopIcon";
+
+interface Mark {
+  id: string;
+  icon: string;
+  x: number;
+  y: number;
+}
+
+interface MarksContainerProps {
+  marks: Mark[];
+  markWidth?: number;
+  markHeigth?: number;
+}
+
+function MarksContainer({
+  marks,
+  markWidth = 64,
+  markHeigth = 64,
+}: MarksContainerProps) {
+  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"
+    >
+      {marks.map((mark) => {
+        let icon;
+
+        switch (mark.icon) {
+          case "shop":
+            icon = <MarkShopIcon />;
+            break;
+
+          default:
+            break;
+        }
+
+        return (
+          <svg
+            x={mark.x}
+            y={mark.y}
+            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"
+            />
+            {icon}
+          </svg>
+        );
+      })}
+    </svg>
+  );
+}
+
+export default MarksContainer;

src/components/icons/marks/MarkShopIcon.tsx

@@ -0,0 +1,12 @@
+function MarkShopIcon() {
+  return (
+    <path
+      d="M26.4442 25.1668H23.7775C22.3047 25.1668 21.1108 26.3607 21.1108 27.8334V42.0557C21.1108 43.5284 22.3047 44.7223 23.7775 44.7223H39.7775C41.2503 44.7223 42.4442 43.5284 42.4442 42.0557V27.8334C42.4442 26.3607 41.2503 25.1668 39.7775 25.1668H37.1108M26.4442 25.1668V29.6112M26.4442 25.1668H37.1108M26.4442 25.1668V23.389C26.4442 22.6886 26.5821 21.9951 26.8501 21.348C27.1182 20.7009 27.511 20.113 28.0063 19.6178C28.5015 19.1225 29.0895 18.7297 29.7365 18.4616C30.3836 18.1936 31.0771 18.0557 31.7775 18.0557C32.4779 18.0557 33.1714 18.1936 33.8185 18.4616C34.4656 18.7297 35.0535 19.1225 35.5487 19.6178C36.044 20.113 36.4368 20.7009 36.7049 21.348C36.9729 21.9951 37.1108 22.6886 37.1108 23.389V25.1668M37.1108 25.1668V29.6112"
+      stroke="white"
+      stroke-width="2.96296"
+      stroke-linecap="square"
+    />
+  );
+}
+
+export default MarkShopIcon;

src/marks.json

@@ -0,0 +1,26 @@
+[
+  {
+    "id": "shop_1",
+    "x": 900,
+    "y": 1000,
+    "icon": "shop"
+  },
+  {
+    "id": "shop_2",
+    "x": 666,
+    "y": 777,
+    "icon": "shop"
+  },
+  {
+    "id": "shop_3",
+    "x": 500,
+    "y": 900,
+    "icon": "shop"
+  },
+  {
+    "id": "shop_4",
+    "x": 300,
+    "y": 500,
+    "icon": "shop"
+  }
+]

src/pages/Infra2Page.tsx

@@ -1,4 +1,17 @@
 import { useEffect, useState } from "react";
+import MarksContainer from "../components/MarksContainer";
+import _marks from "./../marks.json";
+
+interface Mark {
+  id: string;
+  icon: string;
+  x: number;
+  y: number;
+  width?: number;
+  heigth?: number;
+}
+
+const marks = _marks as Mark[];
 
 function Infra2Page() {
   const [width, setWidth] = useState<number>();
@@ -29,18 +42,7 @@ function Infra2Page() {
           alt=""
           className=""
         />
-        <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"
-        >
-          <svg x={1000} y={1000}>
-            <rect width="81" height="81" rx="40.5" fill="white" />
-          </svg>
-        </svg>
+        <MarksContainer marks={marks} />
       </div>
     </div>
   );