Add cputemp to resources widget

src/components/widgets/resources/cputemp.jsx

@@ -0,0 +1,79 @@
+import useSWR from "swr";
+import { FaThermometerHalf } from "react-icons/fa";
+import { BiError } from "react-icons/bi";
+import { useTranslation } from "next-i18next";
+
+export default function CpuTemp({ expanded, units }) {
+  const { t } = useTranslation();
+
+  const { data, error } = useSWR(`/api/widgets/resources?type=cputemp`, {
+    refreshInterval: 1500,
+  });
+
+  if (error || data?.error) {
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
+        <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.temp")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.max")}</div>
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const unit = units === "imperial" ? "fahrenheit" : "celsius";
+  const mainTemp = (unit === "celsius") ? data.cputemp.main : data.cputemp.main * 5/9 + 32;
+  const maxTemp = (unit === "celsius") ? data.cputemp.max : data.cputemp.max * 5/9 + 32;
+
+  return (
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
+        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5">
+            {t("common.number", { 
+              value: mainTemp,
+              maximumFractionDigits: 1,
+              style: "unit",
+              unit
+            })}
+          </div>
+          <div className="pr-1">{t("resources.temp")}</div>
+        </span>
+        {expanded && (
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">
+              {t("common.number", {
+                value: maxTemp,
+                maximumFractionDigits: 1,
+                style: "unit",
+                unit
+              })}
+            </div>
+            <div className="pr-1">{t("resources.max")}</div>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/widgets/resources/resources.jsx

@@ -1,9 +1,10 @@
 import Disk from "./disk";
 import Cpu from "./cpu";
 import Memory from "./memory";
+import CpuTemp from "./cputemp";
 
 export default function Resources({ options }) {
-  const { expanded } = options;
+  const { expanded, units } = options;
   return (
     <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
       <div className="flex flex-row self-center flex-wrap justify-between">
@@ -12,6 +13,7 @@ export default function Resources({ options }) {
         {Array.isArray(options.disk)
           ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} />)
           : options.disk && <Disk options={options} expanded={expanded} />}
+        {options.cputemp && <CpuTemp expanded={expanded} units={units} />}
       </div>
       {options.label && (
         <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>

src/pages/api/widgets/resources.js

@@ -35,6 +35,12 @@ export default async function handler(req, res) {
     });
   }
 
+  if (type === "cputemp") {
+    return res.status(200).json({
+      cputemp: await si.cpuTemperature(),
+    });
+  }
+
   return res.status(400).json({
     error: "invalid type",
   });