docs(integrations): add beszel and system-usage widget

docs/integrations/beszel/index.mdx

@@ -0,0 +1,34 @@
+---
+title: 'Beszel'
+description: "Beszel is a simple, lightweight server monitoring tool."
+hide_title: true
+---
+
+import { IntegrationHeader } from '@site/src/components/integrations/header';
+import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
+import { AddingIntegration } from '@site/src/components/integrations/adding';
+import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IconAd, IconDeviceGamepad } from "@tabler/icons-react";
+import { beszelIntegration } from '.';
+import { systemUsageWidget } from '@site/docs/widgets/system-usage';
+
+<IntegrationHeader
+    integration={beszelIntegration}
+    categories={['System monitoring']}
+/>
+
+### Widgets & Capabilities
+<IntegrationCapabilites
+    items={[{
+        widget: systemUsageWidget,
+    }]}
+/>
+
+### Adding the integration
+<AddingIntegration />
+
+### Secrets
+<IntegrationSecrets secrets={[{
+    credentials: ['username', 'password'],
+    steps: []
+}]} />

docs/integrations/beszel/index.ts

@@ -0,0 +1,8 @@
+import { IntegrationDefinition } from '@site/src/types';
+
+export const beszelIntegration: IntegrationDefinition = {
+  name: 'Beszel',
+  description: 'Simple, lightweight server monitoring tool',
+  iconUrl: 'https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/beszel.svg',
+  path: '../../integrations/beszel',
+};

docs/widgets/system-usage/index.mdx

@@ -0,0 +1,43 @@
+---
+title: 'System Usage'
+description: 'CPU, Memory, Disk and other hardware usage of your system.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { systemUsageWidget } from '.';
+import { dashDotIntegration } from '@site/docs/integrations/dash-dot';
+import { openMediaVaultIntegration } from '@site/docs/integrations/open-media-vault';
+import { proxmoxIntegration } from '@site/docs/integrations/proxmox';
+
+
+<WidgetHeader
+  widget={systemUsageWidget}
+  categories={['CPU', 'RAM', 'Memory', 'Network', 'Disk']}
+/>
+
+Shows percentage usage of system resources like CPU, Memory and Disk. Inspired by Beszel's grid view.
+
+### Screenshots
+
+import screenshot from './img/image.png';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+<img src={screenshot} alt="system-usage-widget" width={256} height={256} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={systemUsageWidget.configuration} />

docs/widgets/system-usage/index.ts

@@ -0,0 +1,28 @@
+import { WidgetDefinition } from '@site/src/types';
+import { IconServer } from '@tabler/icons-react';
+
+export const systemUsageWidget: WidgetDefinition = {
+  icon: IconServer,
+  name: 'System Usage',
+  description: 'CPU, Memory, Disk and other hardware usage of your system',
+  path: '../../widgets/system-usage',
+  configuration: {
+    items: [
+      {
+        name: 'System',
+        description: 'Select the system you want to be monitored.',
+        values: 'One of the systems from Beszel',
+        defaultValue: '-',
+      },
+      {
+        name: 'Visible items',
+        description: 'Select which usage items to display in the widget.',
+        values: {
+          type: 'select',
+          options: ['CPU', 'Memory', 'Disk', 'GPU', 'Load', 'Network', 'Temperature', 'Agent'],
+        },
+        defaultValue: 'All items',
+      },
+    ],
+  },
+};