Refactored information widgets, improve widget-boxed style

Signed-off-by: Denis Papec <denis.papec@gmail.com>

src/components/widgets/resources/cpu.jsx

@@ -1,8 +1,13 @@
 import useSWR from "swr";
 import { FiCpu } from "react-icons/fi";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
+import SingleResource from "../widget/single_resource";
+import WidgetIcon from "../widget/widget_icon";
+import ResourceValue from "../widget/resource_value";
+import ResourceLabel from "../widget/resource_label";
+import Error from "../widget/error";
+
 import UsageBar from "./usage-bar";
 
 export default function Cpu({ expanded }) {
@@ -13,67 +18,38 @@ export default function Cpu({ expanded }) {
   });
 
   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>
-    );
+    return <Error />
   }
 
   if (!data) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left min-w-[85px]">
-          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">-</div>
-            <div className="pr-1">{t("resources.cpu")}</div>
-          </div>
-          {expanded && (
-            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5 pr-1">-</div>
-              <div className="pr-1">{t("resources.load")}</div>
-            </div>
-          )}
-          <UsageBar percent={0} />
-        </div>
-      </div>
-    );
+    return <SingleResource expanded={expanded}>
+      <WidgetIcon icon={FiCpu} />
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.cpu")}</ResourceLabel>
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.load")}</ResourceLabel>
+      <UsageBar percent={0} />
+    </SingleResource>
   }
 
-  const percent = data.cpu.usage;
-
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          <div className="pl-0.5 pr-1">
-            {t("common.number", {
-              value: data.cpu.usage,
-              style: "unit",
-              unit: "percent",
-              maximumFractionDigits: 0,
-            })}
-          </div>
-          <div className="pr-1">{t("resources.cpu")}</div>
-        </div>
-        {expanded && (
-          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">
-              {t("common.number", {
-                value: data.cpu.load,
-                maximumFractionDigits: 2,
-              })}
-            </div>
-            <div className="pr-1">{t("resources.load")}</div>
-          </div>
-        )}
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <SingleResource expanded={expanded}>
+    <WidgetIcon icon={FiCpu} />
+    <ResourceValue>
+      {t("common.number", {
+        value: data.cpu.usage,
+        style: "unit",
+        unit: "percent",
+        maximumFractionDigits: 0,
+      })}
+    </ResourceValue>
+    <ResourceLabel>{t("resources.cpu")}</ResourceLabel>
+    <ResourceValue>
+      {t("common.number", {
+        value: data.cpu.load,
+        maximumFractionDigits: 2,
+      })}
+    </ResourceValue>
+    <ResourceLabel>{t("resources.load")}</ResourceLabel>
+    <UsageBar percent={data.cpu.usage} />
+  </SingleResource>
 }

src/components/widgets/resources/cputemp.jsx

@@ -1,8 +1,13 @@
 import useSWR from "swr";
 import { FaThermometerHalf } from "react-icons/fa";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
+import SingleResource from "../widget/single_resource";
+import WidgetIcon from "../widget/widget_icon";
+import ResourceValue from "../widget/resource_value";
+import ResourceLabel from "../widget/resource_label";
+import Error from "../widget/error";
+
 import UsageBar from "./usage-bar";
 
 function convertToFahrenheit(t) {
@@ -17,34 +22,17 @@ export default function CpuTemp({ expanded, units }) {
   });
 
   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>
-    );
+    return <Error />
   }
 
   if (!data || !data.cputemp) {
-    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>
-    );
+    return <SingleResource expanded={expanded}>
+      <WidgetIcon icon={FaThermometerHalf} />
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.temp")}</ResourceLabel>
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.max")}</ResourceLabel>
+    </SingleResource>
   }
 
   let mainTemp = data.cputemp.main;
@@ -54,38 +42,27 @@ export default function CpuTemp({ expanded, units }) {
   const unit = units === "imperial" ? "fahrenheit" : "celsius";
   mainTemp = (unit === "celsius") ? mainTemp : convertToFahrenheit(mainTemp);
   const maxTemp = (unit === "celsius") ? data.cputemp.max : convertToFahrenheit(data.cputemp.max);
-  const percent = Math.round((mainTemp / maxTemp) * 100);
 
-  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>
-        )}
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <SingleResource expanded={expanded}>
+    <WidgetIcon icon={FaThermometerHalf} />
+    <ResourceValue>
+      {t("common.number", {
+        value: mainTemp,
+        maximumFractionDigits: 1,
+        style: "unit",
+        unit
+      })}
+    </ResourceValue>
+    <ResourceLabel>{t("resources.temp")}</ResourceLabel>
+    <ResourceValue>
+      {t("common.number", {
+        value: maxTemp,
+        maximumFractionDigits: 1,
+        style: "unit",
+        unit
+      })}
+    </ResourceValue>
+    <ResourceLabel>{t("resources.max")}</ResourceLabel>
+    <UsageBar percent={Math.round((mainTemp / maxTemp) * 100)} />
+  </SingleResource>;
 }

src/components/widgets/resources/disk.jsx

@@ -1,8 +1,13 @@
 import useSWR from "swr";
 import { FiHardDrive } from "react-icons/fi";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
+import SingleResource from "../widget/single_resource";
+import WidgetIcon from "../widget/widget_icon";
+import ResourceValue from "../widget/resource_value";
+import ResourceLabel from "../widget/resource_label";
+import Error from "../widget/error";
+
 import UsageBar from "./usage-bar";
 
 export default function Disk({ options, expanded }) {
@@ -13,56 +18,29 @@ export default function Disk({ options, expanded }) {
   });
 
   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>
-    );
+    return <Error options={options} />
   }
 
   if (!data) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FiHardDrive 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 pr-1">-</div>
-            <div className="pr-1">{t("resources.free")}</div>
-          </span>
-          {expanded && (
-            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5 pr-1">-</div>
-              <div className="pr-1">{t("resources.total")}</div>
-            </span>
-          )}
-          <UsageBar percent={0} />
-        </div>
-      </div>
-    );
+    return <SingleResource expanded={expanded}>
+      <WidgetIcon icon={FiHardDrive} />
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.free")}</ResourceLabel>
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.total")}</ResourceLabel>
+      <UsageBar percent={0} />
+    </SingleResource>;
   }
 
   // data.drive.used not accurate?
   const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100);
 
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FiHardDrive 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 pr-1">{t("common.bytes", { value: data.drive.available })}</div>
-          <div className="pr-1">{t("resources.free")}</div>
-        </span>
-        {expanded && (
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">{t("common.bytes", { value: data.drive.size })}</div>
-            <div className="pr-1">{t("resources.total")}</div>
-          </span>
-        )}
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <SingleResource expanded={expanded}>
+    <WidgetIcon icon={FiHardDrive} />
+    <ResourceValue>{t("common.bytes", { value: data.drive.available })}</ResourceValue>
+    <ResourceLabel>{t("resources.free")}</ResourceLabel>
+    <ResourceValue>{t("common.bytes", { value: data.drive.size })}</ResourceValue>
+    <ResourceLabel>{t("resources.total")}</ResourceLabel>
+    <UsageBar percent={percent} />
+  </SingleResource>;
 }

src/components/widgets/resources/memory.jsx

@@ -1,8 +1,13 @@
 import useSWR from "swr";
 import { FaMemory } from "react-icons/fa";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
+import SingleResource from "../widget/single_resource";
+import WidgetIcon from "../widget/widget_icon";
+import ResourceValue from "../widget/resource_value";
+import ResourceLabel from "../widget/resource_label";
+import Error from "../widget/error";
+
 import UsageBar from "./usage-bar";
 
 export default function Memory({ expanded }) {
@@ -13,63 +18,34 @@ export default function Memory({ expanded }) {
   });
 
   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>
-    );
+    return <Error />
   }
 
   if (!data) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FaMemory 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 pr-1">-</div>
-            <div className="pr-1">{t("resources.free")}</div>
-          </span>
-          {expanded && (
-            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5 pr-1">-</div>
-              <div className="pr-1">{t("resources.total")}</div>
-            </span>
-          )}
-          <UsageBar percent={0} />
-        </div>
-      </div>
-    );
+    return <SingleResource expanded={expanded}>
+      <WidgetIcon icon={FaMemory} />
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.free")}</ResourceLabel>
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.total")}</ResourceLabel>
+      <UsageBar percent={0} />
+    </SingleResource>;
   }
 
   const percent = Math.round((data.memory.active / data.memory.total) * 100);
 
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FaMemory 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 pr-1">
-            {t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
-          </div>
-          <div className="pr-1">{t("resources.free")}</div>
-        </span>
-        {expanded && (
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">
-              {t("common.bytes", {
-                value: data.memory.total,
-                maximumFractionDigits: 1,
-                binary: true,
-              })}
-            </div>
-            <div className="pr-1">{t("resources.total")}</div>
-          </span>
-        )}
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <SingleResource expanded={expanded}>
+    <WidgetIcon icon={FaMemory} />
+    <ResourceValue>{t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}</ResourceValue>
+    <ResourceLabel>{t("resources.free")}</ResourceLabel>
+    <ResourceValue>
+      {t("common.bytes", {
+        value: data.memory.total,
+        maximumFractionDigits: 1,
+        binary: true,
+      })}
+    </ResourceValue>
+    <ResourceLabel>{t("resources.total")}</ResourceLabel>
+    <UsageBar percent={percent} />
+  </SingleResource>;
 }

src/components/widgets/resources/resources.jsx

@@ -1,4 +1,5 @@
-import classNames from "classnames";
+import Container from "../widget/container";
+import Raw from "../widget/raw";
 
 import Disk from "./disk";
 import Cpu from "./cpu";
@@ -8,11 +9,8 @@ import Uptime from "./uptime";
 
 export default function Resources({ options }) {
   const { expanded, units } = options;
-  return (
-    <div className={classNames(
-      "flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap",
-      options?.styleBoxed === true && " ml-4 mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-3",
-    )}>
+  return <Container options={options}>
+    <Raw>
       <div className="flex flex-row self-center flex-wrap justify-between">
         {options.cpu && <Cpu expanded={expanded} />}
         {options.memory && <Memory expanded={expanded} />}
@@ -25,6 +23,6 @@ export default function Resources({ options }) {
       {options.label && (
         <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
       )}
-    </div>
-  );
+    </Raw>
+  </Container>;
 }

src/components/widgets/resources/uptime.jsx

@@ -1,8 +1,13 @@
 import useSWR from "swr";
 import { FaRegClock } from "react-icons/fa";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
+import SingleResource from "../widget/single_resource";
+import WidgetIcon from "../widget/widget_icon";
+import ResourceValue from "../widget/resource_value";
+import ResourceLabel from "../widget/resource_label";
+import Error from "../widget/error";
+
 import UsageBar from "./usage-bar";
 
 export default function Uptime() {
@@ -13,35 +18,22 @@ export default function Uptime() {
   });
 
   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>
-    );
+    return <Error />
   }
 
   if (!data) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FaRegClock 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>
-        </div>
-      </div>
-    );
+    return <SingleResource>
+      <WidgetIcon icon={FaRegClock} />
+      <ResourceValue>-</ResourceValue>
+      <ResourceLabel>{t("resources.uptime")}</ResourceLabel>
+    </SingleResource>;
   }
 
   const mo = Math.floor(data.uptime / (3600 * 24 * 31));
   const d = Math.floor(data.uptime % (3600 * 24 * 31) / (3600 * 24));
   const h = Math.floor(data.uptime % (3600 * 24) / 3600);
   const m = Math.floor(data.uptime % 3600 / 60);
-  
+
   let uptime;
   if (mo > 0) uptime = `${mo}${t("resources.months")} ${d}${t("resources.days")}`;
   else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`;
@@ -49,18 +41,10 @@ export default function Uptime() {
 
   const percent = Math.round((new Date().getSeconds() / 60) * 100);
 
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FaRegClock 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">
-            {uptime}
-          </div>
-          <div className="pr-1">{t("resources.uptime")}</div>
-        </span>
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <SingleResource>
+    <WidgetIcon icon={FaRegClock} />
+    <ResourceValue>{uptime}</ResourceValue>
+    <ResourceLabel>{t("resources.uptime")}</ResourceLabel>
+    <UsageBar percent={percent} />
+  </SingleResource>;
 }