mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 09:31:55 +08:00
更新 ServerCard 组件，重构样式和布局，增强网络速度显示，优化服务器详细信息展示，移除不必要的代码，提升可读性和维护性。
This commit is contained in:
parent
b02680896a
commit
372082771c
@ -10,7 +10,7 @@ import { useNavigate } from "react-router-dom"
|
|||||||
import PlanInfo from "./PlanInfo"
|
import PlanInfo from "./PlanInfo"
|
||||||
import BillingInfo from "./billingInfo"
|
import BillingInfo from "./billingInfo"
|
||||||
import { Badge } from "./ui/badge"
|
import { Badge } from "./ui/badge"
|
||||||
import { Card } from "./ui/card"
|
import { Card, CardContent, CardHeader, CardFooter } from "./ui/card"
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
|
||||||
|
|
||||||
export default function ServerCard({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
|
export default function ServerCard({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
|
||||||
@ -47,15 +47,9 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
|||||||
}
|
}
|
||||||
|
|
||||||
const showFlag = true
|
const showFlag = true
|
||||||
|
|
||||||
const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
|
const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
|
||||||
|
|
||||||
// @ts-expect-error ShowNetTransfer is a global variable
|
// @ts-expect-error ShowNetTransfer is a global variable
|
||||||
const showNetTransfer = window.ShowNetTransfer as boolean
|
const showNetTransfer = window.ShowNetTransfer as boolean
|
||||||
|
|
||||||
// @ts-expect-error FixedTopServerName is a global variable
|
|
||||||
const fixedTopServerName = window.FixedTopServerName as boolean
|
|
||||||
|
|
||||||
// @ts-expect-error ShowServerDetails is a global variable
|
// @ts-expect-error ShowServerDetails is a global variable
|
||||||
const showServerDetails = window.ShowServerDetails !== undefined ? window.ShowServerDetails as boolean : true
|
const showServerDetails = window.ShowServerDetails !== undefined ? window.ShowServerDetails as boolean : true
|
||||||
|
|
||||||
@ -70,259 +64,245 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return online ? (
|
// 格式化网络速度
|
||||||
<Card
|
const formatSpeed = (speed: number) => {
|
||||||
className={cn(
|
return speed >= 1024
|
||||||
"flex flex-col items-center justify-start gap-4 p-4 md:px-6 cursor-pointer hover:bg-accent/50 transition-colors",
|
? `${(speed / 1024).toFixed(2)}G/s`
|
||||||
{
|
: speed >= 1
|
||||||
"flex-col": fixedTopServerName,
|
? `${speed.toFixed(2)}M/s`
|
||||||
"lg:flex-row": !fixedTopServerName,
|
: `${(speed * 1024).toFixed(2)}K/s`
|
||||||
},
|
}
|
||||||
{
|
|
||||||
"bg-card/70": customBackgroundImage,
|
if (!online) {
|
||||||
},
|
return (
|
||||||
)}
|
<Card
|
||||||
onClick={cardClick}
|
className={cn(
|
||||||
>
|
"cursor-pointer hover:bg-accent/50 transition-colors border-red-300/30 dark:border-red-900/30",
|
||||||
{/* 服务器名称和标识区域 */}
|
{ "bg-card/70": customBackgroundImage }
|
||||||
<section
|
)}
|
||||||
className={cn("grid items-center gap-3", {
|
onClick={cardClick}
|
||||||
"lg:w-44": !fixedTopServerName,
|
|
||||||
})}
|
|
||||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
|
||||||
>
|
>
|
||||||
<span className="h-2.5 w-2.5 shrink-0 rounded-full bg-green-500 shadow-sm shadow-green-300 dark:shadow-green-900"></span>
|
<CardContent className="p-4">
|
||||||
<div className={cn("flex items-center justify-center", showFlag ? "min-w-[20px]" : "min-w-0")}>
|
<div className="flex items-center gap-3 mb-2">
|
||||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
<span className="h-3 w-3 shrink-0 rounded-full bg-red-500 shadow-sm shadow-red-300 dark:shadow-red-900"></span>
|
||||||
</div>
|
{showFlag && <ServerFlag country_code={country_code} />}
|
||||||
<div className="relative flex flex-col">
|
<h3 className="font-bold text-sm truncate flex-1">{name}</h3>
|
||||||
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-sm" : "text-base")}>{name}</p>
|
|
||||||
<div
|
|
||||||
className={cn("hidden lg:block", {
|
|
||||||
"lg:hidden": fixedTopServerName,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* 计费信息移动端展示 */}
|
{parsedData?.billingDataMod && (
|
||||||
<div
|
<div className="mt-2">
|
||||||
className={cn("flex items-center gap-2 -mt-2 lg:hidden", {
|
<BillingInfo parsedData={parsedData} />
|
||||||
"lg:flex": fixedTopServerName,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col lg:items-start items-center gap-3 w-full">
|
|
||||||
{/* 系统和资源使用情况 */}
|
|
||||||
<section
|
|
||||||
className={cn("grid grid-cols-5 items-center gap-4", {
|
|
||||||
"lg:grid-cols-6 lg:gap-5": fixedTopServerName,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{fixedTopServerName && (
|
|
||||||
<div className={"hidden col-span-1 items-center lg:flex lg:flex-row gap-2"}>
|
|
||||||
<div className="text-xs font-semibold">
|
|
||||||
{platform.includes("Windows") ? (
|
|
||||||
<MageMicrosoftWindows className="size-[12px]" />
|
|
||||||
) : (
|
|
||||||
<p className={`fl-${GetFontLogoClass(platform)}`} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className={"flex w-16 flex-col"}>
|
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.system")}</p>
|
|
||||||
<div className="flex items-center text-[11px] font-semibold">{platform.includes("Windows") ? "Windows" : GetOsName(platform)}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* CPU使用率 */}
|
{parsedData?.planDataMod && (
|
||||||
<div className={"flex w-16 flex-col"}>
|
<div className="mt-2">
|
||||||
<p className="text-xs text-muted-foreground">{"CPU"}</p>
|
<PlanInfo parsedData={parsedData} />
|
||||||
<div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
|
</div>
|
||||||
<ServerUsageBar value={cpu} />
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={cn(
|
||||||
|
"cursor-pointer hover:bg-accent/50 transition-colors border-green-300/30 dark:border-green-900/30",
|
||||||
|
{ "bg-card/70": customBackgroundImage }
|
||||||
|
)}
|
||||||
|
onClick={cardClick}
|
||||||
|
>
|
||||||
|
<CardHeader className="p-4 pb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="h-3 w-3 shrink-0 rounded-full bg-green-500 shadow-sm shadow-green-300 dark:shadow-green-900"></span>
|
||||||
|
{showFlag && <ServerFlag country_code={country_code} />}
|
||||||
|
<h3 className="font-bold text-sm truncate flex-1">{name}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{parsedData?.billingDataMod && (
|
||||||
|
<div className="mt-1">
|
||||||
|
<BillingInfo parsedData={parsedData} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="p-4 pt-2 pb-2">
|
||||||
|
{/* 系统信息和资源使用情况 */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-6 gap-3 mt-1">
|
||||||
|
{/* 系统信息 */}
|
||||||
|
<div className="flex items-center gap-1.5 text-xs">
|
||||||
|
<div className="text-xs">
|
||||||
|
{platform.includes("Windows") ? (
|
||||||
|
<MageMicrosoftWindows className="size-[12px]" />
|
||||||
|
) : (
|
||||||
|
<p className={`fl-${GetFontLogoClass(platform)}`} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{platform.includes("Windows") ? "Windows" : GetOsName(platform)}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 内存使用率 */}
|
{/* 资源使用情况 */}
|
||||||
<div className={"flex w-16 flex-col"}>
|
<div className="col-span-5 grid grid-cols-5 gap-3">
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.mem")}</p>
|
{/* CPU使用率 */}
|
||||||
<div className="flex items-center text-xs font-semibold">{mem.toFixed(2)}%</div>
|
<div className="flex flex-col">
|
||||||
<ServerUsageBar value={mem} />
|
<div className="flex justify-between text-xs">
|
||||||
</div>
|
<span className="text-muted-foreground">CPU</span>
|
||||||
|
<span className="font-medium">{cpu.toFixed(0)}%</span>
|
||||||
|
</div>
|
||||||
|
<ServerUsageBar value={cpu} />
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 存储使用率 */}
|
{/* 内存使用率 */}
|
||||||
<div className={"flex w-16 flex-col"}>
|
<div className="flex flex-col">
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.stg")}</p>
|
<div className="flex justify-between text-xs">
|
||||||
<div className="flex items-center text-xs font-semibold">{stg.toFixed(2)}%</div>
|
<span className="text-muted-foreground">{t("serverCard.mem")}</span>
|
||||||
<ServerUsageBar value={stg} />
|
<span className="font-medium">{mem.toFixed(0)}%</span>
|
||||||
</div>
|
</div>
|
||||||
|
<ServerUsageBar value={mem} />
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 上传速度 */}
|
{/* 存储使用率 */}
|
||||||
<div className={"flex w-16 flex-col"}>
|
<div className="flex flex-col">
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.upload")}</p>
|
<div className="flex justify-between text-xs">
|
||||||
<div className="flex items-center text-xs font-semibold">
|
<span className="text-muted-foreground">{t("serverCard.stg")}</span>
|
||||||
{up >= 1024 ? `${(up / 1024).toFixed(2)}G/s` : up >= 1 ? `${up.toFixed(2)}M/s` : `${(up * 1024).toFixed(2)}K/s`}
|
<span className="font-medium">{stg.toFixed(0)}%</span>
|
||||||
|
</div>
|
||||||
|
<ServerUsageBar value={stg} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 网络上传 */}
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<div className="flex justify-between text-xs">
|
||||||
|
<span className="text-muted-foreground">{t("serverCard.upload")}</span>
|
||||||
|
<span className="font-medium">{formatSpeed(up)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-[3px] bg-muted mt-1 rounded-sm overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-blue-500"
|
||||||
|
style={{ width: `${Math.min(up * 10, 100)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 网络下载 */}
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<div className="flex justify-between text-xs">
|
||||||
|
<span className="text-muted-foreground">{t("serverCard.download")}</span>
|
||||||
|
<span className="font-medium">{formatSpeed(down)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-[3px] bg-muted mt-1 rounded-sm overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-green-500"
|
||||||
|
style={{ width: `${Math.min(down * 10, 100)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* 下载速度 */}
|
|
||||||
<div className={"flex w-16 flex-col"}>
|
|
||||||
<p className="text-xs text-muted-foreground">{t("serverCard.download")}</p>
|
|
||||||
<div className="flex items-center text-xs font-semibold">
|
|
||||||
{down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : down >= 1 ? `${down.toFixed(2)}M/s` : `${(down * 1024).toFixed(2)}K/s`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* 服务器详细信息区域 */}
|
{/* 服务器详细信息区域 */}
|
||||||
{showServerDetails && (
|
{showServerDetails && (
|
||||||
<section className="flex flex-col gap-2 w-full mt-1 bg-muted/30 p-2 rounded-md">
|
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||||
{/* 服务器配置信息 */}
|
{/* 运行时间 */}
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
{uptime > 0 && (
|
||||||
{/* 运行时间 */}
|
<TooltipProvider>
|
||||||
{uptime > 0 && (
|
<Tooltip>
|
||||||
<TooltipProvider>
|
<TooltipTrigger asChild>
|
||||||
<Tooltip>
|
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
|
||||||
</Badge>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent className="text-xs">
|
|
||||||
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
||||||
</TooltipContent>
|
</Badge>
|
||||||
</Tooltip>
|
</TooltipTrigger>
|
||||||
</TooltipProvider>
|
<TooltipContent className="text-xs">
|
||||||
)}
|
{t("serverCard.uptime")}: {formatUptime(uptime, t)}
|
||||||
|
</TooltipContent>
|
||||||
{/* CPU信息 */}
|
</Tooltip>
|
||||||
{cpu_info && cpu_info.length > 0 && (
|
</TooltipProvider>
|
||||||
<TooltipProvider>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
{cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "}
|
|
||||||
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
|
||||||
</Badge>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent className="text-xs">
|
|
||||||
{cpu_info.join(", ")}
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 内存大小 */}
|
|
||||||
{mem_total > 0 && (
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 存储大小 */}
|
|
||||||
{disk_total > 0 && (
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* TCP连接数 */}
|
|
||||||
{tcp > 0 && (
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
TCP: {tcp}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* UDP连接数 */}
|
|
||||||
{udp > 0 && (
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
UDP: {udp}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 进程数 */}
|
|
||||||
{process > 0 && (
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
|
||||||
{t("serverDetailChart.process")}: {process}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 套餐信息 */}
|
|
||||||
{parsedData?.planDataMod && (
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<PlanInfo parsedData={parsedData} />
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</section>
|
|
||||||
|
{/* CPU信息 */}
|
||||||
|
{cpu_info && cpu_info.length > 0 && (
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
||||||
|
{cpu_info[0].includes("Physical") ? "pCPU: " : "vCPU: "}
|
||||||
|
{cpu_info[0].match(/(\d+)\s+(?:Physical|Virtual)\s+Core/)?.[1] || "?"}
|
||||||
|
</Badge>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="text-xs">
|
||||||
|
{cpu_info.join(", ")}
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 内存大小 */}
|
||||||
|
{mem_total > 0 && (
|
||||||
|
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
||||||
|
{t("serverCard.mem")}: {formatBytes(mem_total)}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 存储大小 */}
|
||||||
|
{disk_total > 0 && (
|
||||||
|
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
||||||
|
{t("serverCard.stg")}: {formatBytes(disk_total)}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* TCP连接数 */}
|
||||||
|
{tcp > 0 && (
|
||||||
|
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
||||||
|
TCP: {tcp}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* UDP连接数 */}
|
||||||
|
{udp > 0 && (
|
||||||
|
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
||||||
|
UDP: {udp}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 进程数 */}
|
||||||
|
{process > 0 && (
|
||||||
|
<Badge variant="outline" className="text-[10px] py-0 h-5">
|
||||||
|
{t("serverDetailChart.process")}: {process}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
<CardFooter className="p-4 pt-0 flex flex-col gap-2">
|
||||||
|
{/* 套餐信息 */}
|
||||||
|
{parsedData?.planDataMod && (
|
||||||
|
<div className="w-full">
|
||||||
|
<PlanInfo parsedData={parsedData} />
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 网络传输信息 */}
|
{/* 网络传输信息 */}
|
||||||
{showNetTransfer && (
|
{showNetTransfer && (
|
||||||
<section className={"flex items-center w-full justify-between gap-2 mt-1"}>
|
<div className="grid grid-cols-2 w-full gap-2">
|
||||||
<Badge
|
<Badge
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
className="items-center flex-1 justify-center rounded-[8px] text-[11px] border-muted-50 shadow-sm py-1.5"
|
className="flex justify-center items-center py-1 text-[10px]"
|
||||||
>
|
>
|
||||||
{t("serverCard.upload")}: {formatBytes(net_out_transfer)}
|
{t("serverCard.upload")}: {formatBytes(net_out_transfer)}
|
||||||
</Badge>
|
</Badge>
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="items-center flex-1 justify-center rounded-[8px] text-[11px] shadow-sm py-1.5"
|
className="flex justify-center items-center py-1 text-[10px]"
|
||||||
>
|
>
|
||||||
{t("serverCard.download")}: {formatBytes(net_in_transfer)}
|
{t("serverCard.download")}: {formatBytes(net_in_transfer)}
|
||||||
</Badge>
|
</Badge>
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
) : (
|
|
||||||
<Card
|
|
||||||
className={cn(
|
|
||||||
"flex flex-col items-center justify-start gap-4 p-4 md:px-6 cursor-pointer hover:bg-accent/50 transition-colors",
|
|
||||||
showNetTransfer ? "lg:min-h-[100px] min-h-[130px]" : "lg:min-h-[70px] min-h-[100px]",
|
|
||||||
{
|
|
||||||
"flex-col": fixedTopServerName,
|
|
||||||
"lg:flex-row": !fixedTopServerName,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"bg-card/70": customBackgroundImage,
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
onClick={cardClick}
|
|
||||||
>
|
|
||||||
<section
|
|
||||||
className={cn("grid items-center gap-3", {
|
|
||||||
"lg:w-44": !fixedTopServerName,
|
|
||||||
})}
|
|
||||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
|
||||||
>
|
|
||||||
<span className="h-2.5 w-2.5 shrink-0 rounded-full bg-red-500 shadow-sm shadow-red-300 dark:shadow-red-900"></span>
|
|
||||||
<div className={cn("flex items-center justify-center", showFlag ? "min-w-[20px]" : "min-w-0")}>
|
|
||||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
|
||||||
</div>
|
|
||||||
<div className="relative flex flex-col">
|
|
||||||
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-sm" : "text-base")}>{name}</p>
|
|
||||||
<div
|
|
||||||
className={cn("hidden lg:block", {
|
|
||||||
"lg:hidden": fixedTopServerName,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</section>
|
</CardFooter>
|
||||||
<div
|
|
||||||
className={cn("flex items-center gap-2 lg:hidden", {
|
|
||||||
"lg:flex": fixedTopServerName,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
|
|
||||||
</div>
|
|
||||||
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
|
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user