root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(global): tooltip animation

Browse Source
This commit is contained in:
hamster1963 2024-11-25 18:03:35 +08:00
parent f043f5e3a9
commit e6cd4daa57
2 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/(main)/ClientComponents/Global.tsx
View File

@ -20,6 +20,10 @@ export default async function ServerGlobal() {
}
});
countrytList.push("TW");
countrytList.push("SG");
countrytList.push("RU");
const width = 900;
const height = 500;

12
app/(main)/ClientComponents/InteractiveMap.tsx
View File

@ -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,9 +89,13 @@ export function InteractiveMap({
})}
</g>
</svg>
<AnimatePresence mode="wait">
{tooltipData && (
<div
className="absolute pointer-events-none bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm"
<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],
@ -101,8 +106,9 @@ export function InteractiveMap({
<p className="text-neutral-600 dark:text-neutral-400">
{tooltipData.count} {t("Servers")}
</p>
</div>
</m.div>
)}
</AnimatePresence>
</div>
);
}