35 lines
1.4 KiB
PHP
35 lines
1.4 KiB
PHP
@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>
|