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 width = 900;
const height = 500; const height = 500;

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

@ -2,6 +2,7 @@
import { countryCodeMapping } from "@/lib/geo"; import { countryCodeMapping } from "@/lib/geo";
import { geoEqualEarth, geoPath } from "d3-geo"; import { geoEqualEarth, geoPath } from "d3-geo";
import { AnimatePresence, m } from "framer-motion";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useState } from "react"; import { useState } from "react";
@ -88,9 +89,13 @@ export function InteractiveMap({
})} })}
</g> </g>
</svg> </svg>
<AnimatePresence mode="wait">
{tooltipData && ( {tooltipData && (
<div <m.div
className="absolute pointer-events-none bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm" 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={{ style={{
left: tooltipData.centroid[0], left: tooltipData.centroid[0],
top: tooltipData.centroid[1], top: tooltipData.centroid[1],
@ -101,8 +106,9 @@ export function InteractiveMap({
<p className="text-neutral-600 dark:text-neutral-400"> <p className="text-neutral-600 dark:text-neutral-400">
{tooltipData.count} {t("Servers")} {tooltipData.count} {t("Servers")}
</p> </p>
</div> </m.div>
)} )}
</AnimatePresence>
</div> </div>
); );
} }