@php
    $examples = [
        'A menu' => <<<'BLADE'
            <x-menu label="Share actions">
                <x-slot:trigger>
                    <x-button icon="more_vert" tooltip="More" />
                </x-slot:trigger>

                <x-menu-item label="Copy link" icon="content_copy" shortcut="⌘C" />
                <x-menu-item label="Download" icon="download" />
                <x-menu-item label="Rename" icon="edit" description="Change what recipients see" />
                <x-menu-separator />
                <x-menu-item label="Delete" icon="delete" />
            </x-menu>

            <x-menu label="Sort" position="bottom-end">
                <x-slot:trigger>
                    <x-button label="Sort" icon-right="arrow_drop_down" variant="outlined" />
                </x-slot:trigger>

                <x-menu-group label="Sort by">
                    <x-menu-item label="Newest" :selected="true" keep-open />
                    <x-menu-item label="Largest" :selected="false" keep-open />
                    <x-menu-item label="Expiring soon" :selected="false" keep-open />
                </x-menu-group>
                <x-menu-separator />
                <x-menu-item label="Reset" icon="restart_alt" disabled />
            </x-menu>

            <x-menu label="Vibrant" vibrant>
                <x-slot:trigger>
                    <x-button label="Vibrant" variant="tonal" color="tertiary" />
                </x-slot:trigger>

                <x-menu-item label="Upload files" icon="upload_file" />
                <x-menu-item label="Upload a folder" icon="drive_folder_upload" />
            </x-menu>
            BLADE,
        'Icons in their own colour' => <<<'BLADE'
            <x-menu label="New plan">
                <x-slot:trigger>
                    <x-button label="New plan" icon="add" variant="filled" />
                </x-slot:trigger>

                <x-menu-item label="Running" icon="directions_run" icon-class="text-tertiary" />
                <x-menu-item label="Cycling" icon="directions_bike" icon-class="text-secondary" />
                <x-menu-item label="Swimming" icon="pool" icon-class="text-info" />
                <x-menu-item label="Rowing" icon="rowing" icon-class="text-tertiary" disabled />
            </x-menu>
            BLADE,
    ];
@endphp

<section id="menus" class="scroll-mt-24 space-y-6">
    <h2 class="type-headline-md">Menus</h2>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        <code>&lt;x-menu&gt;</code> with <code>&lt;x-menu-item&gt;</code>, <code>&lt;x-menu-group&gt;</code> and <code>&lt;x-menu-separator&gt;</code>.
        Open one with the keyboard too: arrows, Home, End, a letter, Escape.
    </p>

    @foreach ($examples as $title => $code)
        <x-showcase::example :$title :$code />
    @endforeach
</section>