style: network display

This commit is contained in:
hamster1963 2024-12-04 17:37:38 +08:00
parent 79e40144b5
commit 1cb56973aa
2 changed files with 13 additions and 13 deletions

View File

@ -52,7 +52,7 @@ function Header() {
(handlers[element.tagName] || handlers.DEFAULT)(element); (handlers[element.tagName] || handlers.DEFAULT)(element);
} else if (node.nodeType === Node.TEXT_NODE) { } else if (node.nodeType === Node.TEXT_NODE) {
document.body.appendChild( document.body.appendChild(
document.createTextNode(node.textContent || "") document.createTextNode(node.textContent || ""),
); );
} }
}); });
@ -155,7 +155,7 @@ function Overview() {
const timeOption = DateTime.TIME_SIMPLE; const timeOption = DateTime.TIME_SIMPLE;
timeOption.hour12 = true; timeOption.hour12 = true;
const [timeString, setTimeString] = useState( const [timeString, setTimeString] = useState(
DateTime.now().setLocale("en-US").toLocaleString(timeOption) DateTime.now().setLocale("en-US").toLocaleString(timeOption),
); );
useInterval(() => { useInterval(() => {
setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption)); setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption));

View File

@ -98,21 +98,21 @@ export default function ServerOverview({
<p className="text-sm font-medium md:text-base"> <p className="text-sm font-medium md:text-base">
{t("serverOverview.network")} {t("serverOverview.network")}
</p> </p>
<section className="flex flex-row z-[999] sm:items-center items-start pr-2 sm:pr-0 gap-1 ml-auto">
<p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400 text-nowrap font-medium">
{formatBytes(up)}
</p>
<p className="sm:text-[12px] text-[10px] text-purple-800 dark:text-purple-400 text-nowrap font-medium">
{formatBytes(down)}
</p>
</section>
</div> </div>
<section className="flex flex-row mt-1.5 -mr-1 sm:items-center items-start gap-1"> <section className="flex items-start flex-row z-[999] pr-2 sm:pr-0 gap-1">
<p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold"> <p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400 text-nowrap font-medium">
{formatBytes(up)}
</p>
<p className="sm:text-[12px] text-[10px] text-purple-800 dark:text-purple-400 text-nowrap font-medium">
{formatBytes(down)}
</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]" /> <ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1px]" />
{formatBytes(upSpeed)}/s {formatBytes(upSpeed)}/s
</p> </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" /> <ArrowDownCircleIcon className="size-3 mr-0.5" />
{formatBytes(downSpeed)}/s {formatBytes(downSpeed)}/s
</p> </p>