40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { Group, Stack, Text } from '@mantine/core';
|
|
import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { RouterOutputs } from '~/utils/api';
|
|
|
|
import { bytes } from '../../tools/bytesHelper';
|
|
|
|
interface DashDotCompactNetworkProps {
|
|
info: DashDotInfo;
|
|
}
|
|
|
|
export type DashDotInfo = RouterOutputs['dashDot']['info'];
|
|
|
|
export const DashDotCompactNetwork = ({ info }: DashDotCompactNetworkProps) => {
|
|
const { t } = useTranslation('modules/dashdot');
|
|
|
|
const upSpeed = bytes.toPerSecondString(info?.network?.speedUp);
|
|
const downSpeed = bytes.toPerSecondString(info?.network?.speedDown);
|
|
|
|
return (
|
|
<Group noWrap align="start" position="apart" w="100%">
|
|
<Text weight={500}>{t('card.graphs.network.label')}</Text>
|
|
<Stack align="end" spacing={0}>
|
|
<Group spacing={0}>
|
|
<Text size="xs" color="dimmed" align="right">
|
|
{upSpeed}
|
|
</Text>
|
|
<IconArrowNarrowUp size={16} stroke={1.5} />
|
|
</Group>
|
|
<Group spacing={0}>
|
|
<Text size="xs" color="dimmed" align="right">
|
|
{downSpeed}
|
|
</Text>
|
|
<IconArrowNarrowDown size={16} stroke={1.5} />
|
|
</Group>
|
|
</Stack>
|
|
</Group>
|
|
);
|
|
};
|