Settings Nav code

@props([
    'items' => [],
])

@php
    /*
    | Vertical anchor navigation for settings/profile pages.
    |
    | Usage:
    |   <x-ui.settings-nav :items="[
    |       ['href' => '#profile', 'icon' => 'user', 'label' => 'Profile'],
    |       ['href' => '#delete', 'icon' => 'trash', 'label' => 'Delete', 'danger' => true],
    |   ]" />
    |
    | Or compose items:
    |   <x-ui.settings-nav>
    |       <x-ui.settings-nav.item href="#profile" icon="user">Profile</x-ui.settings-nav.item>
    |   </x-ui.settings-nav>
    */
@endphp

<nav {{ $attributes->merge(['class' => 'space-y-1']) }}>
    @if ($items !== [])
        @foreach ($items as $item)
            <x-ui.settings-nav.item
                :href="$item['href'] ?? '#'"
                :icon="$item['icon'] ?? null"
                :danger="($item['danger'] ?? false)"
            >
                {{ $item['label'] ?? '' }}
            </x-ui.settings-nav.item>
        @endforeach
    @else
        {{ $slot }}
    @endif
</nav>

@props([
    'href' => '#',
    'icon' => null,
    'danger' => false,
])

@php
    /*
    | Single anchor row for <x-ui.settings-nav>.
    |
    | Usage:
    |   <x-ui.settings-nav.item href="#avatar" icon="palette">Avatar</x-ui.settings-nav.item>
    */
    $linkClass = $danger
        ? 'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-red-600 transition hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40'
        : 'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800';
@endphp

<a href="{{ $href }}" {{ $attributes->merge(['class' => $linkClass]) }}>
    @if ($icon)
        <x-ui.icon :name="$icon" size="base" @class(['text-gray-400' => ! $danger]) />
    @endif
    {{ $slot }}
</a>