Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-02-05 21:20:08 +00: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
Download Patch File Download Diff File Expand all files Collapse all files

32
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 && (
<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>
{country_code && <ServerFlag className="text-[11px] -mt-[1px]" country_code={country_code} />}
</section>
</section>
</CardContent>
</Card>
<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">{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 }