✨ Add gridstack dashboard layout

src/components/Dashboard/Tiles/DashDot/DashDotCompactNetwork.tsx

@@ -0,0 +1,36 @@
+import { Group, Stack, Text } from '@mantine/core';
+import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import { bytes } from '../../../../tools/bytesHelper';
+import { DashDotInfo } from './DashDotTile';
+
+interface DashDotCompactNetworkProps {
+  info: DashDotInfo;
+}
+
+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%'} maw={'251px'}>
+      <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>
+  );
+};