50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { Group, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
|
|
import { IconDevices, IconNetwork, IconUsers, IconVideo } from "@tabler/icons-react";
|
|
|
|
import type { TracearrDashboardData } from "@homarr/integrations/types";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
export function StatsBar({
|
|
stats,
|
|
summary,
|
|
width,
|
|
}: {
|
|
stats: TracearrDashboardData["stats"];
|
|
summary: TracearrDashboardData["streams"]["summary"];
|
|
width: number;
|
|
}) {
|
|
const t = useScopedI18n("widget.tracearr");
|
|
const cols = width > 400 ? 4 : width > 250 ? 2 : 1;
|
|
|
|
return (
|
|
<SimpleGrid cols={cols} spacing="xs">
|
|
<StatCard icon={<IconVideo size={16} />} label={t("stats.activeStreams")} value={stats.activeStreams} />
|
|
<StatCard icon={<IconUsers size={16} />} label={t("stats.totalUsers")} value={stats.totalUsers} />
|
|
<StatCard
|
|
icon={<IconDevices size={16} />}
|
|
label={t("stats.transcodes")}
|
|
value={`${summary.transcodes}/${summary.total}`}
|
|
/>
|
|
<StatCard icon={<IconNetwork size={16} />} label={t("stats.bandwidth")} value={summary.totalBitrate} />
|
|
</SimpleGrid>
|
|
);
|
|
}
|
|
|
|
function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: string | number }) {
|
|
return (
|
|
<Paper p="xs" radius="lg">
|
|
<Group gap={4} wrap="nowrap">
|
|
{icon}
|
|
<Stack gap={0} style={{ overflow: "hidden" }}>
|
|
<Text size="xs" c="dimmed" lineClamp={1}>
|
|
{label}
|
|
</Text>
|
|
<Text size="sm" fw={600}>
|
|
{value}
|
|
</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Paper>
|
|
);
|
|
}
|