standard colours

2026-06-23 15:32:05 +01:00
parent 3be4ff590f
commit a8cbb8e2ac
19 changed files with 330 additions and 56 deletions
@@ -0,0 +1,34 @@
+@props([
+    'label' => 'Badge colour',
+    'model',
+    'options' => [],
+])
+
+<div {{ $attributes->class('space-y-2') }}>
+    <label class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">
+        {{ $label }}
+    </label>
+
+    <select
+        wire:model="{{ $model }}"
+        class="block h-10 w-full rounded-xl border border-zinc-300 bg-white px-3 text-sm font-semibold text-zinc-900 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+    >
+        @foreach ($options as $key => $option)
+            <option value="{{ $key }}" style="color: {{ $option['hex'] }};">
+                ● {{ $option['name'] }} — {{ $option['hex'] }}
+            </option>
+        @endforeach
+    </select>
+
+    <div class="flex flex-wrap gap-1.5" aria-label="Available Helpdesk colours">
+        @foreach ($options as $key => $option)
+            <span
+                title="{{ $option['name'] }} {{ $option['hex'] }}"
+                class="inline-flex h-5 min-w-5 items-center justify-center rounded-full border border-white/70 shadow-sm ring-1 ring-zinc-900/10"
+                style="background-color: {{ $option['hex'] }}"
+            >
+                <span class="sr-only">{{ $option['name'] }}</span>
+            </span>
+        @endforeach
+    </div>
+</div>