Swatch code

@props([
    'shade',
    'hex',
    'token' => null,
    'onDark' => false,
])

@php
    /*
    | A single colour chip for the palette page. Shows the swatch with its shade
    | number and hex value. Pass `token` (e.g. brand-600) to paint from the live
    | CSS custom property so theme switches update the chip without a reload.
    |
    | Usage:
    |   <x-ui.swatch shade="600" hex="#0f766e" token="brand-600" />
    */
    $isLight = (int) $shade <= 300;
    $labelOnChip = $isLight ? 'text-gray-900/70' : 'text-white/90';
    $background = $token
        ? 'var(--color-'.$token.', '.$hex.')'
        : $hex;
@endphp

<div class="group" x-data="{ copied: false }">
    <button
        type="button"
        @click="navigator.clipboard.writeText('{{ $hex }}'); copied = true; setTimeout(() => copied = false, 1200)"
        class="relative flex h-16 w-full items-end rounded-xl p-2 ring-1 ring-inset ring-black/10 shadow-sm transition hover:scale-[1.03] cursor-pointer"
        style="background-color: {{ $background }}"
        title="Copy {{ $hex }}"
    >
        <span class="text-[10px] font-semibold tabular-nums {{ $labelOnChip }}">{{ $shade }}</span>
        <span x-show="copied" x-cloak class="absolute inset-0 flex items-center justify-center rounded-xl bg-black/40 text-[10px] font-semibold text-white">Copied</span>
    </button>
    <p class="mt-1.5 text-[11px] font-medium uppercase tabular-nums {{ $onDark ? 'text-gray-400' : 'text-gray-400 dark:text-gray-500' }}">{{ $hex }}</p>
</div>