Fixed

src/components.js

@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic';
+
+const components = {
+  // other components
+  resourceUsage: dynamic(() => import('./resourceUsage/component')),
+  yourwidget: dynamic(() => import("./yourwidget/component"))
+};
+
+export default components;

src/widgets.js

@@ -0,0 +1,9 @@
+import resourceUsage from "./resourceUsage/widget";
+import yourwidget from "./yourwidget/widget";
+const widgets = {
+    // other widgets
+    resourceUsage: resourceUsage,
+    yourwidget: yourwidget
+};
+
+export default widgets;

src/widgets/resourceUsage/component.jsx

@@ -0,0 +1,37 @@
+import { useTranslation } from "next-i18next";
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+    const { t } = useTranslation();
+    const { widget } = service;
+    const { data, error } = useWidgetAPI(widget, "info");
+
+    if (error) {
+        return <Container service={service} error={error} />;
+    }
+
+    if (!data) {
+        return (
+            <Container service={service}>
+                <Block label="Loading..." />
+            </Container>
+        );
+    }
+
+    return (
+        <Container service={service}>
+            <Block label="Machine Name" value={data.ComputerInfo.MachineName} />
+            <Block label="OS Version" value={data.ComputerInfo.OSVersion} />
+            <Block label="OS Architecture" value={data.ComputerInfo.OSArchitecture} />
+            <Block label="Processor Count" value={data.ComputerInfo.ProcessorCount} />
+            <Block label="CPU Usage" value={data.CPU} />
+            <Block label="RAM Usage" value={data.RAM} />
+            <Block label="GPU Usage" value={data.GPU.Usage} />
+            <Block label="GPU Temperature" value={data.GPU.Temperature} />
+            <Block label="GPU Fan Speed" value={data.GPU.FanSpeed} />
+            <Block label="Currently Running Game" value={data.CurrentlyRunningGame} />
+        </Container>
+    );
+}

src/widgets/resourceUsage/widget.js

@@ -0,0 +1,13 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+    api: "http://192.168.50.201:5000/api/resource-usage",
+    proxyHandler: genericProxyHandler,
+    mappings: {
+        info: {
+            endpoint: ""
+        }
+    }
+};
+
+export default widget;

src/widgets/yourwidget/component.jsx

@@ -0,0 +1,33 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  const { data, error } = useWidgetAPI(widget, "info");
+
+  if (error) {
+    return <Container service={service} error={error} />;
+  }
+
+  if (!data) {
+    return (
+      <Container service={service}>
+        <Block label="yourwidget.key1" />
+        <Block label="yourwidget.key2" />
+        <Block label="yourwidget.key3" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
+      <Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
+      <Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
+    </Container>
+  );
+}

src/widgets/yourwidget/widget.js

@@ -0,0 +1,14 @@
+import genericProxyHandler from "utils/proxy/handlers/generic"; 
+
+const widget =  {
+  api: "{url}/{endpoint}" ,
+  proxyHandler: genericProxyHandler ,
+
+  mappings:  {
+    info:  {
+      endpoint: "v1/info" ,
+    },
+  },
+};
+
+export default widget;