Kbd code

@props([
    'keys' => null,
])

@php
    /*
    | Keyboard key hint. Pass `keys` as an array to render a combo joined with
    | "+", or use the slot for a single key.
    |
    | Usage:
    |   <x-ui.kbd>Esc</x-ui.kbd>
    |   <x-ui.kbd :keys="['Ctrl', 'K']" />
    */
    $key = 'inline-flex items-center justify-center min-w-[1.5rem] rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-1.5 py-0.5 text-xs font-semibold text-gray-600 dark:text-gray-300 shadow-sm';
@endphp

@if (is_array($keys))
    <span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1']) }}>
        @foreach ($keys as $i => $k)
            @if ($i > 0)<span class="text-xs text-gray-400 dark:text-gray-500">+</span>@endif
            <kbd class="{{ $key }}">{{ $k }}</kbd>
        @endforeach
    </span>
@else
    <kbd {{ $attributes->merge(['class' => $key]) }}>{{ $slot }}</kbd>
@endif