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;

36
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,21 +89,26 @@ export function InteractiveMap({
})} })}
</g> </g>
</svg> </svg>
{tooltipData && ( <AnimatePresence mode="wait">
<div {tooltipData && (
className="absolute pointer-events-none bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm" <m.div
style={{ initial={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
left: tooltipData.centroid[0], animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
top: tooltipData.centroid[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"
transform: "translate(-50%, -50%)", key={tooltipData.country}
}} style={{
> left: tooltipData.centroid[0],
<p className="font-medium">{tooltipData.country}</p> top: tooltipData.centroid[1],
<p className="text-neutral-600 dark:text-neutral-400"> transform: "translate(-50%, -50%)",
{tooltipData.count} {t("Servers")} }}
</p> >
</div> <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> </div>
); );
} }