From fb7ee84934ad32d5e8cb5fdd9df00d65192650ef Mon Sep 17 00:00:00 2001
From: Brandon McFarlin <6525520+Brandawg93@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:49:44 -0500
Subject: [PATCH] add docs

---
 docs/widgets/info/peanut.md              | 17 ++++++
 public/locales/en/common.json            |  4 +-
 src/components/widgets/peanut/peanut.jsx | 73 +++++++++++++++---------
 3 files changed, 65 insertions(+), 29 deletions(-)
 create mode 100644 docs/widgets/info/peanut.md

diff --git a/docs/widgets/info/peanut.md b/docs/widgets/info/peanut.md
new file mode 100644
index 00000000..8e90c084
--- /dev/null
+++ b/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
+```
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 2192a7de..17d90b9b 100644
--- a/public/locales/en/common.json
+++ b/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",
diff --git a/src/components/widgets/peanut/peanut.jsx b/src/components/widgets/peanut/peanut.jsx
index fb446190..9b3b8d4f 100644
--- a/src/components/widgets/peanut/peanut.jsx
+++ b/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
-        icon={FaCarBattery}
-        value="-"
-        label="Load"
-        expandedValue="-"
-        expandedLabel="Battery"
-        expanded={expanded}
-        percentage="0"
-      />
+      <Container options={options}>
+        <Raw>
+          <div>
+            <Resource
+              icon={FaCarBattery}
+              value="-"
+              label={t("peanut.load")}
+              expandedValue="-"
+              expandedLabel={t("peanut.battery")}
+              expanded={expanded}
+              percentage="0"
+            />
+          </div>
+        </Raw>
+      </Container>
     );
   }
 
   return (
-    <Resource
-      icon={FaCarBattery}
-      value={t("common.number", {
-        value: data['ups.load'],
-        style: "unit",
-        unit: "percent",
-        maximumFractionDigits: 0,
-      })}
-      label="Load"
-      expandedValue={t("common.number", {
-        value: data['battery.charge'],
-        style: "unit",
-        unit: "percent",
-        maximumFractionDigits: 0,
-      })}
-      expandedLabel="Battery"
-      percentage={data['ups.load']}
-      expanded={expanded}
-    />
+    <Container options={options}>
+      <Raw>
+        <div>
+          <Resource
+            icon={FaCarBattery}
+            value={t("common.number", {
+              value: data['ups.load'],
+              style: "unit",
+              unit: "percent",
+              maximumFractionDigits: 0,
+            })}
+            label={t("peanut.load")}
+            expandedValue={t("common.number", {
+              value: data['battery.charge'],
+              style: "unit",
+              unit: "percent",
+              maximumFractionDigits: 0,
+            })}
+            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>
   );
 }