first public source commit

src/components/widgets/resources/resources.jsx

@@ -0,0 +1,114 @@
+import useSWR from "swr";
+import { FiHardDrive, FiCpu } from "react-icons/fi";
+import { FaMemory } from "react-icons/fa";
+
+export default function Resources({ options }) {
+  const { data, error } = useSWR(
+    `/api/widgets/resources?disk=${options.disk}`,
+    {
+      refreshInterval: 1500,
+    }
+  );
+
+  if (error) {
+    return <div>failed to load</div>;
+  }
+
+  if (!data) {
+    return (
+      <>
+        {options.disk && (
+          <div className="flex-none flex flex-row items-center justify-center mr-5">
+            <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+            <div className="flex flex-col ml-3 text-left font-mono">
+              <span className="text-theme-800 dark:text-theme-200 text-xs">
+                - GB free
+              </span>
+              <span className="text-theme-800 dark:text-theme-200 text-xs">
+                - GB used
+              </span>
+            </div>
+          </div>
+        )}
+
+        {options.cpu && (
+          <div className="flex-none flex flex-row items-center justify-center mr-5">
+            <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+            <div className="flex flex-col ml-3 text-left font-mono">
+              <span className="text-theme-800 dark:text-theme-200 text-xs">
+                - Usage
+              </span>
+              <span className="text-theme-800 dark:text-theme-200 text-xs">
+                - Load
+              </span>
+            </div>
+          </div>
+        )}
+
+        {options.memory && (
+          <div className="flex-none flex flex-row items-center justify-center mr-5">
+            <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+            <div className="flex flex-col ml-3 text-left font-mono">
+              <span className="text-theme-800 dark:text-theme-200 text-xs">
+                - GB Used
+              </span>
+              <span className="text-theme-800 dark:text-theme-200 text-xs">
+                - GB Free
+              </span>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+
+  if (data.error) {
+    return <div className="flex flex-col items-center justify-center"></div>;
+  }
+
+  return (
+    <>
+      {options.disk && (
+        <div className="flex-none flex flex-row items-center justify-center mr-5">
+          <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+          <div className="flex flex-col ml-3 text-left font-mono">
+            <span className="text-theme-800 dark:text-theme-200 text-xs">
+              {Math.round(data.drive.freeGb)} GB free
+            </span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">
+              {Math.round(data.drive.totalGb)} GB used
+            </span>
+          </div>
+        </div>
+      )}
+
+      {options.cpu && (
+        <div className="flex-none flex flex-row items-center justify-center mr-5">
+          <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+          <div className="flex flex-col ml-3 text-left font-mono">
+            <span className="text-theme-800 dark:text-theme-200 text-xs">
+              {Math.round(data.cpu.usage)}% Usage
+            </span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">
+              {Math.round(data.cpu.load * 100) / 100} Load
+            </span>
+          </div>
+        </div>
+      )}
+
+      {options.memory && (
+        <div className="flex-none flex flex-row items-center justify-center mr-5">
+          <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+          <div className="flex flex-col ml-3 text-left font-mono">
+            <span className="text-theme-800 dark:text-theme-200 text-xs">
+              {Math.round((data.memory.usedMemMb / 1024) * 100) / 100} GB Used
+            </span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">
+              {Math.round((data.memory.freeMemMb / 1024) * 100) / 100} GB Free
+            </span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/widgets/weather/icon.jsx

@@ -0,0 +1,9 @@
+import mapIcon from "utils/condition-map";
+
+export default function Icon({ condition, timeOfDay }) {
+  const Icon = mapIcon(condition, timeOfDay);
+
+  return (
+    <Icon className="mt-2 w-10 h-10 text-theme-800 dark:text-theme-200"></Icon>
+  );
+}

src/components/widgets/weather/weather.jsx

@@ -0,0 +1,41 @@
+import useSWR from "swr";
+import Icon from "./icon";
+
+export default function Weather({ options }) {
+  const { data, error } = useSWR(
+    `/api/widgets/weather?lat=${options.latitude}&lon=${options.longitude}&apiKey=${options.apiKey}&duration=${options.cache}`,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  if (error) {
+    return <div>failed to load</div>;
+  }
+
+  if (!data) {
+    return <div className="flex flex-col items-center justify-center"></div>;
+  }
+
+  if (data.error) {
+    return <div className="flex flex-col items-center justify-center"></div>;
+  }
+
+  return (
+    <div className="order-last grow flex-none flex flex-row items-center justify-end">
+      <Icon
+        condition={data.current.condition.code}
+        timeOfDay={data.current.is_day ? "day" : "night"}
+      />
+      <div className="flex flex-col ml-3 text-left">
+        <span className="text-theme-800 dark:text-theme-200 text-sm">
+          {Math.round(data.current.temp_f)}&deg;
+        </span>
+        <span className="text-theme-800 dark:text-theme-200 text-xs">
+          {data.current.condition.text}
+        </span>
+      </div>
+    </div>
+  );
+}