🧼 Refactors wifi and ap to use StatusItem

2025-03-08 14:35:55 +01:00
parent 72f3bcfd78
commit 99660b9a23
5 changed files with 955 additions and 1161 deletions
@@ -0,0 +1,43 @@
+<script lang="ts">
+  type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
+
+  const {
+    icon,
+    title,
+    description = '',
+    variant = 'primary',
+    class: klass = '',
+    children = null
+  } = $props<{
+    icon: any
+    title: string
+    description?: string | number
+    variant?: Variant
+    class?: string
+    children?: () => any
+  }>()
+
+  const Icon = $derived(icon)
+
+  const variants: Record<Variant, [string, string]> = {
+    success: ['bg-success', 'text-success-content'],
+    error: ['bg-error', 'text-error-content'],
+    primary: ['bg-primary', 'text-primary-content'],
+    info: ['bg-info', 'text-info-content'],
+    warning: ['bg-warning', 'text-warning-content']
+  }
+
+  const variantKey: Variant = (variant as Variant) in variants ? (variant as Variant) : 'primary'
+  const [bgColor, textColor] = variants[variantKey]
+</script>
+
+<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2 {klass}">
+  <div class="mask mask-hexagon {bgColor} h-auto w-10 flex-none">
+    <Icon class="{textColor} h-auto w-full scale-75" />
+  </div>
+  <div class="grow">
+    <div class="font-bold">{title}</div>
+    <div class="text-sm opacity-75 grow">{description}</div>
+  </div>
+  {@render children?.()}
+</div>