✨ Add gridstack dashboard layout

src/tools/bytesHelper.ts

@@ -0,0 +1,26 @@
+export const bytes = {
+  toPerSecondString: (bytes?: number) => {
+    if (!bytes) return '-';
+    for (let i = 0; i < 4; i++) {
+      if (bytes >= 1000 && i !== 3) {
+        bytes /= 1000;
+        continue;
+      }
+
+      return `${bytes.toFixed(1)} ${perSecondUnits[i]}`;
+    }
+  },
+  toString: (bytes: number) => {
+    for (let i = 0; i < 4; i++) {
+      if (bytes >= 1024 && i !== 3) {
+        bytes /= 1024;
+        continue;
+      }
+
+      return `${bytes.toFixed(1)} ${units[i]}`;
+    }
+  },
+};
+
+const perSecondUnits = ['b/s', 'Kb/s', 'Mb/s', 'Gb/s'];
+const units = ['B', 'KiB', 'MiB', 'GiB'];

src/tools/hooks/useScreenLargerThan.ts

@@ -0,0 +1,8 @@
+import { MantineSize, useMantineTheme } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+export const useScreenLargerThan = (size: MantineSize | number) => {
+  const { breakpoints } = useMantineTheme();
+  const pixelCount = typeof size === 'string' ? breakpoints[size] : size;
+  return useMediaQuery(`(min-width: ${pixelCount}px)`);
+};

src/tools/hooks/useScreenSmallerThan.ts

@@ -0,0 +1,8 @@
+import { MantineSize, useMantineTheme } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+export const useScreenSmallerThan = (size: MantineSize | number) => {
+  const { breakpoints } = useMantineTheme();
+  const pixelCount = typeof size === 'string' ? breakpoints[size] : size;
+  return useMediaQuery(`(max-width: ${pixelCount}px)`);
+};

src/tools/percentage.ts

@@ -0,0 +1,3 @@
+export const percentage = (partialValue: number, totalValue: number) => {
+  return ((100 * partialValue) / totalValue).toFixed(1);
+};