<x-ui::command-modal focusable>
    <x-slot:trigger>
        <x-ui::secondary-button icon="terminal">
            <div class="flex gap-4 items-center">
                <div>Command</div>
                <div class="text-gray-400 text-xs">cmd+k</div>
            </div>
        </x-ui::secondary-button>

    </x-slot:trigger>

        <div x-data="{ open(){ $data.show = true } }"
            @keydown.window.prevent.ctrl.k="open()"
            @keydown.window.prevent.meta.k="open()"
        >

        <x-ui::forms.search-text-input placeholder="search" autofocus focusable />

        <div class="min-w-96 text-gray-500 mt-4 py-4">
            No results found ...
        </div>
    </div>
</x-ui::command-modal>

<x-ui::command-menu>
    <x-slot:trigger>
        <x-ui::secondary-button icon="flask">Execute</x-ui::secondary-button>
    </x-slot:trigger>

    <x-ui::command-menu.item icon="star" label="Favourites">
        <x-ui::command-menu.checkbox icon="fire"    label="Products" />
        <x-ui::command-menu.checkbox icon="search" label="Components" />
        <x-ui::command-menu.checkbox icon="circle" label="Tasks" />
        <x-ui::command-menu.checkbox icon="dragon" label="Dungeons and dragons" />
    </x-ui::command-menu.item>

    <x-ui::command-menu.item  icon="message" label="Messages">
        <x-ui::command-menu.checkbox icon="fire"    label="Products" />
        <x-ui::command-menu.checkbox icon="search" label="Components" />
        <x-ui::command-menu.checkbox icon="circle" label="Tasks" />
        <x-ui::command-menu.checkbox icon="dragon" label="Dungeons and dragons" />
    </x-ui::command-menu.item>

    <x-ui::command-menu.item icon="bolt" label="Integrations">
        <x-ui::command-menu.checkbox icon="fire"    label="Products" />
        <x-ui::command-menu.checkbox icon="search" label="Components" />
        <x-ui::command-menu.checkbox icon="circle" label="Tasks" />
        <x-ui::command-menu.checkbox icon="dragon" label="Dungeons and dragons" />
    </x-ui::command-menu.item>

    <x-ui::command-menu.item icon="user" label="Profile">
        <x-ui::command-menu.checkbox icon="fire"    label="Products" />
        <x-ui::command-menu.checkbox icon="search" label="Components" />
        <x-ui::command-menu.checkbox icon="circle" label="Tasks" />
        <x-ui::command-menu.checkbox icon="dragon" label="Dungeons and dragons" />
    </x-ui::command-menu.item>

    <x-ui::command-menu.separator />

    <x-ui::command-menu.item icon="user" label="Configuration">
        <x-ui::command-menu.checkbox icon="fire"    label="Products" />
        <x-ui::command-menu.checkbox icon="search" label="Components" />
        <x-ui::command-menu.checkbox icon="circle" label="Tasks" />
        <x-ui::command-menu.checkbox icon="dragon" label="Dungeons and dragons" />
</x-ui::command-menu.item>