Update widgets

2022-09-22 23:06:49 +10:00
parent dcfd738c75
commit 781d782a70
11 changed files with 243 additions and 77 deletions
@@ -0,0 +1,30 @@
+import type React from "react";
+
+import { BoltIcon } from "@heroicons/react/24/outline";
+
+import { Card } from "../Card.js";
+
+export interface BatteryWidgetProps {
+  batteryLevel: number;
+  voltage: number;
+}
+
+export const BatteryWidget = ({
+  batteryLevel,
+  voltage,
+}: BatteryWidgetProps): JSX.Element => {
+  return (
+    <Card>
+      <div className="flex w-20 bg-slate-700 p-3">
+        <BoltIcon className="m-auto h-12 text-white" />
+      </div>
+      <div className="w-full">
+        <div className="flex h-8 bg-slate-100">
+          <span className="m-auto text-lg font-medium">Power</span>
+        </div>
+        <span>{batteryLevel}</span>
+        <span>{voltage}</span>
+      </div>
+    </Card>
+  );
+};