72 lines
3.1 KiB
PHP
72 lines
3.1 KiB
PHP
@props([
|
|
'label' => 'Badge colour',
|
|
'model',
|
|
'options' => [],
|
|
])
|
|
|
|
@php
|
|
$currentValue = data_get($this, $model, 'gray');
|
|
$currentHex = \Modules\Helpdesk\Support\Color::css($currentValue);
|
|
$currentText = \Modules\Helpdesk\Support\Color::text($currentValue);
|
|
$currentLabel = \Modules\Helpdesk\Support\Color::label($currentValue);
|
|
@endphp
|
|
|
|
<div {{ $attributes->class('space-y-3') }}>
|
|
<label class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">
|
|
{{ $label }}
|
|
</label>
|
|
|
|
<div class="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
|
|
<div class="space-y-2">
|
|
<select
|
|
wire:model.live="{{ $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)
|
|
<button
|
|
type="button"
|
|
wire:click="$set('{{ $model }}', '{{ $key }}')"
|
|
title="{{ $option['name'] }} {{ $option['hex'] }}"
|
|
class="inline-flex h-6 min-w-6 items-center justify-center rounded-full border border-white/80 shadow-sm ring-1 ring-zinc-900/10 transition hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500/40"
|
|
style="background-color: {{ $option['hex'] }}"
|
|
>
|
|
<span class="sr-only">Use {{ $option['name'] }}</span>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<span
|
|
class="inline-flex min-w-28 items-center justify-center rounded-full px-3 py-2 text-xs font-bold shadow-sm ring-1 ring-zinc-900/10"
|
|
style="background-color: {{ $currentHex }}; color: {{ $currentText }};"
|
|
>
|
|
{{ $currentLabel }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid gap-3 md:grid-cols-[auto_minmax(0,1fr)] md:items-center">
|
|
<input
|
|
type="color"
|
|
value="{{ $currentHex }}"
|
|
wire:change="$set('{{ $model }}', $event.target.value)"
|
|
class="h-10 w-16 cursor-pointer rounded-xl border border-zinc-300 bg-white p-1 shadow-sm dark:border-zinc-700 dark:bg-zinc-950"
|
|
aria-label="Choose a custom hex colour"
|
|
/>
|
|
|
|
<flux:input
|
|
wire:model.live.debounce.500ms="{{ $model }}"
|
|
label="Custom hex colour"
|
|
placeholder="#ffffff"
|
|
description="Use the standard palette where possible. Custom hex values must use six characters, for example #ffffff."
|
|
/>
|
|
</div>
|
|
</div>
|