guter zwischenstand

webpage/src/components/DeviceInfo.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import FlashUsage from "./FlashUsage.svelte"
+    import { BatteryEmptyIcon, BatteryLowIcon, BatteryMediumIcon, BatteryHighIcon, BatteryFullIcon, BatteryChargingIcon } from "phosphor-svelte"
+    
+</script>
+<div class="text-sm">
+    <table>
+        <tbody>
+            <tr>
+                <td class="key">
+                    Modell
+                </td>
+                <td class="value">
+                    nrf52840dk-prototyp
+                </td>
+            </tr>
+            <tr>
+                <td class="key">
+                    Version
+                </td>
+                <td class="value">
+                    2.3.22-debug
+                </td>
+            </tr>
+            <tr>
+                <td class="key">
+                    HW-ID
+                </td>
+                <td class="value">
+                    <span class="font-mono">DEAD-BEAF-0102-3456</span>
+                </td>
+            </tr>
+            <tr>
+                <td class="key">
+                    Batterie
+                </td>
+                <td class="value flex items-center gap-2">
+                    85% <BatteryChargingIcon weight="bold" class="w-5 h-5"/> 1200mAh
+                </td>
+            </tr>
+            <tr>
+                <td class="key">
+                    Speicher
+                </td>
+                <td class="value">
+                    <div class="py-1">
+                        <FlashUsage/>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<style>
+  @reference "../styles/app.css";
+
+  table {
+    @apply w-full text-left;
+  }
+
+  tr {
+    @apply even:bg-slate-100 border-b border-slate-200 last:border-0;
+  }
+
+  .key {
+    @apply p-1 pl-4 text-right text-text-muted;
+  }
+
+  .value {
+    @apply p-1 pr-4 font-semibold;
+  }