From e6cd4daa5782ece287369063563b9f53de932186 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 25 Nov 2024 18:03:35 +0800
Subject: [PATCH] feat(global): tooltip animation

---
 app/(main)/ClientComponents/Global.tsx        |  4 +++
 .../ClientComponents/InteractiveMap.tsx       | 36 +++++++++++--------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/app/(main)/ClientComponents/Global.tsx b/app/(main)/ClientComponents/Global.tsx
index 1982db0..e257f4b 100644
--- a/app/(main)/ClientComponents/Global.tsx
+++ b/app/(main)/ClientComponents/Global.tsx
@@ -20,6 +20,10 @@ export default async function ServerGlobal() {
     }
   });
 
+  countrytList.push("TW");
+  countrytList.push("SG");
+  countrytList.push("RU");
+
   const width = 900;
   const height = 500;
 
diff --git a/app/(main)/ClientComponents/InteractiveMap.tsx b/app/(main)/ClientComponents/InteractiveMap.tsx
index c6cf93f..5c54f1d 100644
--- a/app/(main)/ClientComponents/InteractiveMap.tsx
+++ b/app/(main)/ClientComponents/InteractiveMap.tsx
@@ -2,6 +2,7 @@
 
 import { countryCodeMapping } from "@/lib/geo";
 import { geoEqualEarth, geoPath } from "d3-geo";
+import { AnimatePresence, m } from "framer-motion";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
@@ -88,21 +89,26 @@ export function InteractiveMap({
           })}
         </g>
       </svg>
-      {tooltipData && (
-        <div
-          className="absolute pointer-events-none bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm"
-          style={{
-            left: tooltipData.centroid[0],
-            top: tooltipData.centroid[1],
-            transform: "translate(-50%, -50%)",
-          }}
-        >
-          <p className="font-medium">{tooltipData.country}</p>
-          <p className="text-neutral-600 dark:text-neutral-400">
-            {tooltipData.count} {t("Servers")}
-          </p>
-        </div>
-      )}
+      <AnimatePresence mode="wait">
+        {tooltipData && (
+          <m.div
+            initial={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
+            animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+            className="absolute pointer-events-none bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700"
+            key={tooltipData.country}
+            style={{
+              left: tooltipData.centroid[0],
+              top: tooltipData.centroid[1],
+              transform: "translate(-50%, -50%)",
+            }}
+          >
+            <p className="font-medium">{tooltipData.country}</p>
+            <p className="text-neutral-600 dark:text-neutral-400">
+              {tooltipData.count} {t("Servers")}
+            </p>
+          </m.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }