feat(global): tooltip animation

hamster1963 · Nov 25, 2024 · e6cd4da · e6cd4da
1 parent f043f5e
commit e6cd4da
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git 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
@@ -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>
   );
 }