Command

templ CommandDemo() {
	<div class="w-full max-w-sm overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md">
		@ui.Command("", nil) {
			@ui.CommandInput("Type a command or search...", "", nil)
			@ui.CommandList("", nil) {
				@ui.CommandEmpty("", nil) {
					No results found.
				}
				@ui.CommandGroup("Suggestions", "", nil) {
					@ui.CommandItem("Calendar", "", templ.Attributes{"x-on:click": "console.log('Calendar')"}) {
						@icons.Calendar(icons.Props{Class: "mr-2 h-4 w-4"})
						<span>Calendar</span>
					}
					@ui.CommandItem("Search Emoji", "", templ.Attributes{"x-on:click": "console.log('Search Emoji')"}) {
						@icons.Search(icons.Props{Class: "mr-2 h-4 w-4"})
						<span>Search Emoji</span>
					}
					@ui.CommandItem("Calculator", "", templ.Attributes{"x-on:click": "console.log('Calculator')"}) {
						@icons.Settings(icons.Props{Class: "mr-2 h-4 w-4"})
						<span>Calculator</span>
					}
				}
				@ui.CommandSeparator("", nil)
				@ui.CommandGroup("Settings", "", nil) {
					@ui.CommandItem("Profile", "", templ.Attributes{"x-on:click": "console.log('Profile')"}) {
						@icons.User(icons.Props{Class: "mr-2 h-4 w-4"})
						<span>Profile</span>
					}
					@ui.CommandItem("Billing", "", templ.Attributes{"x-on:click": "console.log('Billing')"}) {
						@icons.CreditCard(icons.Props{Class: "mr-2 h-4 w-4"})
						<span>Billing</span>
					}
					@ui.CommandItem("Settings", "", templ.Attributes{"x-on:click": "console.log('Settings')"}) {
						@icons.Settings(icons.Props{Class: "mr-2 h-4 w-4"})
						<span>Settings</span>
					}
				}
			}
		}
	</div>
}