47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { SimpleGrid, Stack } from "@mantine/core";
|
|
import { IconArrowDown, IconArrowUp, IconWaveSine } from "@tabler/icons-react";
|
|
|
|
import type { SpeedtestTrackerStats } from "@homarr/integrations/types";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
import { formatStatsSpeed } from "./helpers";
|
|
import { SectionLabel } from "./section-label";
|
|
import { SpeedStatCard } from "./speed-stat-card";
|
|
|
|
export function AveragesSection({ stats }: { stats: SpeedtestTrackerStats }) {
|
|
const t = useScopedI18n("widget.speedtestTracker");
|
|
|
|
return (
|
|
<Stack gap={6} h="100%">
|
|
<SectionLabel>
|
|
{t("averages")} · {t("tests", { count: stats.total_results.toString() })}
|
|
</SectionLabel>
|
|
<SimpleGrid cols={3} spacing="xs" style={{ flex: 1, gridTemplateRows: "1fr" }}>
|
|
<SpeedStatCard
|
|
icon={IconArrowDown}
|
|
color="blue"
|
|
value={formatStatsSpeed(stats.download)}
|
|
label={t("avgDownload")}
|
|
compact
|
|
/>
|
|
<SpeedStatCard
|
|
icon={IconArrowUp}
|
|
color="teal"
|
|
value={formatStatsSpeed(stats.upload)}
|
|
label={t("avgUpload")}
|
|
compact
|
|
/>
|
|
<SpeedStatCard
|
|
icon={IconWaveSine}
|
|
color="orange"
|
|
value={`${stats.ping.avg.toFixed(1)} ms`}
|
|
label={t("avgPing")}
|
|
compact
|
|
/>
|
|
</SimpleGrid>
|
|
</Stack>
|
|
);
|
|
}
|