docs: add system resources widget (#352)

Author: manuel-rw

docs/widgets/system-resources/img/dark-widget.png

@@ -0,0 +1,45 @@
+---
+title: 'System Resources'
+description: 'Displays CPU, RAM and network of your host in real time'
+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 { systemResourcesWidget } 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={systemResourcesWidget}
+  categories={['CPU', 'RAM', 'Memory', 'Network', 'Interface']}
+/>
+
+Displays CPU, RAM and network of your host in real time
+
+### Screenshots
+
+import widget from './img/dark-widget.png';
+
+<div className='flex gap-1'>
+  <img src={widget} alt="system resources widget" width={256} height={256} />
+</div>
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: dashDotIntegration
+}, {
+  integration: openMediaVaultIntegration
+}, {
+  integration: proxmoxIntegration
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+

docs/widgets/system-resources/index.mdx

@@ -0,0 +1,9 @@
+import { WidgetDefinition } from '@site/src/types';
+import { IconGraph } from '@tabler/icons-react';
+
+export const systemResourcesWidget: WidgetDefinition = {
+  icon: IconGraph,
+  name: 'System Resources',
+  description: 'Displays CPU, RAM and network of your host',
+  path: '../../widgets/system-resources'
+};