style: network display

This commit is contained in:
hamster1963 2024-12-04 18:06:28 +08:00
parent 8042edaeff
commit 310e7d4338
2 changed files with 15 additions and 15 deletions

View File

@ -175,29 +175,29 @@ export default function ServerOverviewClient() {
},
)}
>
<CardContent className="flex h-full items-center relative px-3 py-1 pr-0 sm:px-6 sm:py-3">
<CardContent className="flex h-full items-center relative px-6 py-3">
<section className="flex flex-col gap-1 w-full">
<div className="flex items-center w-full justify-between">
<p className="text-sm font-medium md:text-base">
{t("network")}
</p>
<section className="flex flex-row z-[999] bg-white/80 dark:bg-black/80 backdrop-blur-sm sm:items-center items-start pr-2 sm:pr-0 gap-1 ml-auto">
<p className="sm:text-[12px] text-[10px] text-nowrap font-medium">
{formatBytes(data?.total_out_bandwidth || 0)}
</p>
<p className="sm:text-[12px] text-[10px] text-nowrap font-medium">
{formatBytes(data?.total_in_bandwidth || 0)}
</p>
</section>
</div>
{data?.result ? (
<>
<section className="flex flex-row mt-1.5 -mr-1 sm:items-center items-start gap-1">
<p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold">
<ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1.1px]" />
<section className="flex items-start flex-row z-[999] pr-2 sm:pr-0 gap-1">
<p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400 text-nowrap font-medium">
{formatBytes(data?.total_out_bandwidth)}
</p>
<p className="sm:text-[12px] text-[10px] text-purple-800 dark:text-purple-400 text-nowrap font-medium">
{formatBytes(data?.total_in_bandwidth)}
</p>
</section>
<section className="flex flex-col sm:flex-row -mr-1 sm:items-center items-start gap-1">
<p className="text-[11px] flex items-center text-nowrap font-semibold">
<ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1px]" />
{formatBytes(data?.total_out_speed)}/s
</p>
<p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold">
<p className="text-[11px] flex items-center text-nowrap font-semibold">
<ArrowDownCircleIcon className="size-3 mr-0.5" />
{formatBytes(
data?.total_in_speed,
@ -206,7 +206,7 @@ export default function ServerOverviewClient() {
</section>
</>
) : (
<div className="flex h-6 items-center">
<div className="flex h-[38px] items-center">
<Loader visible={true} />
</div>
)}