Feature: Add peaNUT Widget (#2450)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/widgets/peanut/component.jsx

@@ -0,0 +1,49 @@
+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 { widget } = service;
+  const { t } = useTranslation();
+
+  const { data: upsData, error: upsError } = useWidgetAPI(widget, "devices");
+
+  if (upsError) {
+    return <Container service={service} error={upsError} />;
+  }
+
+  if (!upsData) {
+    return (
+      <Container service={service}>
+        <Block label="peanut.battery_charge" />
+        <Block label="peanut.ups_load" />
+        <Block label="peanut.ups_status" />
+      </Container>
+    );
+  }
+
+  let status;
+  switch (upsData.ups_status) {
+    case "OL":
+      status = t("peanut.online");
+      break;
+    case "OB":
+      status = t("peanut.on_battery");
+      break;
+    case "LB":
+      status = t("peanut.low_battery");
+      break;
+    default:
+      status = upsData.ups_status;
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="peanut.battery_charge" value={t("common.percent", { value: upsData.battery_charge })} />
+      <Block label="peanut.ups_load" value={t("common.percent", { value: upsData.ups_load })} />
+      <Block label="peanut.ups_status" value={status} />
+    </Container>
+  );
+}