add docs

docs/widgets/info/peanut.md

@@ -0,0 +1,17 @@
+---
+title: PeaNUT
+description: PeaNUT Information Widget Configuration
+---
+
+_(Find the PeaNUT service widget [here](../services/peanut.md))_
+
+The PeaNUT widget allows you to monitor your UPS device and is designed to match the `resources` info widget. You can have multiple instances by adding another configuration block.
+
+```yaml
+- peanut:
+    url: http://peanut.host.or.ip:port # the URL of the PeaNUT server
+    key: nameofyourups # the name of the device
+    refresh: 3000 # optional, in ms
+    label: My UPS # optional
+    expanded: false # show the expanded view
+```

public/locales/en/common.json

@@ -552,7 +552,9 @@
         "ups_status": "UPS Status",
         "online": "Online",
         "on_battery": "On Battery",
-        "low_battery": "Low Battery"
+        "low_battery": "Low Battery",
+        "load": "Load",
+        "battery": "Battery"
     },
     "nextdns": {
         "wait": "Please Wait",

src/components/widgets/peanut/peanut.jsx

@@ -4,6 +4,8 @@ import { useTranslation } from "next-i18next";
 
 import Error from "../widget/error";
 import Resource from "../widget/resource";
+import Raw from "../widget/raw";
+import Container from "../widget/container";
 
 export default function Widget({ options }) {
   const { t } = useTranslation();
@@ -24,37 +26,52 @@ export default function Widget({ options }) {
 
   if (!data) {
     return (
-      <Resource
+      <Container options={options}>
-        icon={FaCarBattery}
+        <Raw>
-        value="-"
+          <div>
-        label="Load"
+            <Resource
-        expandedValue="-"
+              icon={FaCarBattery}
-        expandedLabel="Battery"
+              value="-"
-        expanded={expanded}
+              label={t("peanut.load")}
-        percentage="0"
+              expandedValue="-"
-      />
+              expandedLabel={t("peanut.battery")}
+              expanded={expanded}
+              percentage="0"
+            />
+          </div>
+        </Raw>
+      </Container>
     );
   }
 
   return (
-    <Resource
+    <Container options={options}>
-      icon={FaCarBattery}
+      <Raw>
-      value={t("common.number", {
+        <div>
-        value: data['ups.load'],
+          <Resource
-        style: "unit",
+            icon={FaCarBattery}
-        unit: "percent",
+            value={t("common.number", {
-        maximumFractionDigits: 0,
+              value: data['ups.load'],
-      })}
+              style: "unit",
-      label="Load"
+              unit: "percent",
-      expandedValue={t("common.number", {
+              maximumFractionDigits: 0,
-        value: data['battery.charge'],
+            })}
-        style: "unit",
+            label={t("peanut.load")}
-        unit: "percent",
+            expandedValue={t("common.number", {
-        maximumFractionDigits: 0,
+              value: data['battery.charge'],
-      })}
+              style: "unit",
-      expandedLabel="Battery"
+              unit: "percent",
-      percentage={data['ups.load']}
+              maximumFractionDigits: 0,
-      expanded={expanded}
+            })}
-    />
+            expandedLabel={t("peanut.battery")}
+            percentage={data['ups.load']}
+            expanded={expanded}
+          />
+        </div>
+        {options.label && (
+          <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
+        )}
+      </Raw>
+    </Container>
   );
 }