wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 09:31:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add tooltip component and integrate it into ServerDetailOverview

Browse Source
This commit is contained in:
hamster1963 2025-02-01 14:04:55 +08:00
parent 51995c107a
commit 94eb966d65
4 changed files with 54 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

11
package.json
View File

@ -25,8 +25,9 @@
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-switch": "^1.1.2",
"@tanstack/react-query": "^5.65.1",
"@tanstack/react-query-devtools": "^5.65.1",
"@radix-ui/react-tooltip": "^1.1.7",
"@tanstack/react-query": "^5.66.0",
"@tanstack/react-query-devtools": "^5.66.0",
"@tanstack/react-table": "^8.20.6",
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
"@types/d3-geo": "^3.1.0",
@ -46,15 +47,15 @@
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-i18next": "^15.4.0",
"react-router-dom": "^7.1.3",
"react-router-dom": "^7.1.5",
"recharts": "^2.15.1",
"sonner": "^1.7.3",
"sonner": "^1.7.4",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@types/node": "^22.12.0",
"@types/node": "^22.13.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react-swc": "^3.7.2",

12
src/components/ServerDetailOverview.tsx
View File

@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next"
import { useNavigate } from "react-router-dom"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
export default function ServerDetailOverview({ server_id }: { server_id: string }) {
const { t } = useTranslation()
@ -165,17 +166,26 @@ export default function ServerDetailOverview({ server_id }: { server_id: string
) : null}
{country_code && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">{t("serverDetail.region")}</p>
<section className="flex items-start gap-1">
<div className="text-xs text-start">{countries.getName(country_code?.toUpperCase(), "en")}</div>
<div className="text-xs text-start">{country_code?.toUpperCase()}</div>
{country_code && <ServerFlag className="text-[11px] -mt-[1px]" country_code={country_code} />}
</section>
</section>
</CardContent>
</Card>
</TooltipTrigger>
<TooltipContent>
<p>{countries.getName(country_code?.toUpperCase(), "en")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</section>
<section className="flex flex-wrap gap-2 mt-1">

27
src/components/ui/tooltip.tsx Normal file
View File

@ -0,0 +1,27 @@
import { cn } from "@/lib/utils"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import * as React from "react"
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-[8px] border font-medium bg-popover px-1.5 py-0.5 text-xs text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
/>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }