Command

CommandDialog do
	CommandDialogTrigger do
		Button(variant: "outline", class: 'w-56 pr-2 pl-3 justify-between') do
			div(class: "flex items-center space-x-1") do
				search_icon
				span(class: "text-muted-foreground font-normal") do
					plain "Search"
				end
			end
			ShortcutKey do
				span(class: "text-xs") { "⌘" }
				plain "K"
			end
		end
	end
	CommandDialogContent do
		Command do
			CommandInput(placeholder: "Type a command or search...")
			CommandEmpty { "No results found." }
			CommandList do
				CommandGroup(title: "Components") do
					components_list.each do |component|
						CommandItem(value: component[:name], href: component[:path]) do
							default_icon
							plain component[:name]
						end
					end
				end
				CommandGroup(title: "Settings") do
					settings_list.each do |setting|
						CommandItem(value: setting[:name], href: setting[:path]) do
							default_icon
							plain setting[:name]
						end
					end
				end
			end
		end
	end
end

CommandDialog do
	CommandDialogTrigger(keybindings: ['keydown.ctrl+j@window', 'keydown.meta+j@window']) do
		p(class: "text-sm text-muted-foreground") do
			span(class: 'mr-1') { "Press" }
			ShortcutKey do
				span(class: "text-xs") { "⌘" }
				plain "J"
			end
		end
	end
	CommandDialogContent do
		Command do
			CommandInput(placeholder: "Type a command or search...")
			CommandEmpty { "No results found." }
			CommandList do
				CommandGroup(title: "Components") do
					components_list.each do |component|
						CommandItem(value: component[:name], href: component[:path]) do
							default_icon
							plain component[:name]
						end
					end
				end
				CommandGroup(title: "Settings") do
					settings_list.each do |setting|
						CommandItem(value: setting[:name], href: setting[:path]) do
							default_icon
							plain setting[:name]
						end
					end
				end
			end
		end
	end
end