From 872237167d6fba64f572ad9b3f0214102d55b79f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 31 Mar 2023 10:37:31 -0700
Subject: [PATCH] Uptime usage bar

---
 src/components/widgets/resources/uptime.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/widgets/resources/uptime.jsx b/src/components/widgets/resources/uptime.jsx
index 2624bef12..3bf785b1e 100644
--- a/src/components/widgets/resources/uptime.jsx
+++ b/src/components/widgets/resources/uptime.jsx
@@ -3,6 +3,8 @@ import { FaRegClock } from "react-icons/fa";
 import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
+import UsageBar from "./usage-bar";
+
 export default function Uptime() {
   const { t } = useTranslation();
 
@@ -45,6 +47,8 @@ export default function Uptime() {
   else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`;
   else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`;
 
+  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" />
@@ -55,6 +59,7 @@ export default function Uptime() {
           </div>
           <div className="pr-1">{t("resources.uptime")}</div>
         </span>
+        <UsageBar percent={percent} />
       </div>
     </div>
   );