feat: modernize dashboard widgets

apps/docs/docs/widgets/firewall/index.mdx

@@ -1,22 +1,20 @@
 ---
-title: 'Firewall Monitoring'
-description: 'Displays a summary of firewalls.'
+title: "Firewall Monitoring"
+description: "Displays a summary of firewalls."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { firewallWidget } from '.';
-import { opnsenseIntegration } from '../../integrations/opnsense';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { firewallWidget } from ".";
+import { opnsenseIntegration } from "../../integrations/opnsense";
 
-<WidgetHeader
-  widget={firewallWidget}
-  categories={['Firewall']}
-/>
+<WidgetHeader widget={firewallWidget} categories={["Firewall"]} />
 
 ### Screenshots
 
@@ -24,9 +22,15 @@ import { opnsenseIntegration } from '../../integrations/opnsense';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: opnsenseIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: opnsenseIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget