feat: global

app/(main)/ClientComponents/Global.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import DottedMap from "dotted-map";
+
+export default function Global() {
+
+    const map = new DottedMap({ height: 60, grid: "vertical" });
+
+    map.addPin({
+        lat: 40.73061,
+        lng: -73.935242,
+        svgOptions: { color: '#FF4500', radius: 0.4 },
+    });
+    map.addPin({
+        lat: 48.8534,
+        lng: 2.3488,
+        svgOptions: { color: '#FF4500', radius: 0.4 },
+    });
+
+
+    const svgMap = map.getSVG({
+        radius: 0.35,
+        color: "#D1D5DA",
+        shape: "circle",
+        // backgroundColor: "#15103E"
+    });
+
+
+
+    return (
+        <img
+            src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
+            alt=""
+        />
+    );
+}

app/(main)/page.tsx

@@ -1,11 +1,13 @@
 import ServerList from "@/components/ServerList";
 import ServerOverview from "@/components/ServerOverview";
+import Global from "./ClientComponents/Global";
 
 export default function Home() {
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
       <ServerOverview />
-      <ServerList />
+      {/* <ServerList /> */}
+      <Global />
     </div>
   );
 }

package.json

@@ -3,7 +3,7 @@
   "version": "1.3.2",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3020",
+    "dev": "next dev -p 3040",
     "start": "node .next/standalone/server.js",
     "lint": "next lint",
     "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
@@ -28,6 +28,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
+    "dotted-map": "^2.2.3",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "flag-icons": "^7.2.3",
     "framer-motion": "^12.0.0-alpha.1",