Command Palette

import { useState } from 'react'
import { Button, CommandPalette } from '@creo-team/buzz-ui/client'

const commands = [
	{
		id: 'new-file',
		label: 'New File',
		description: 'Create a new file',
		group: 'File',
		icon: <FileIcon className="h-4 w-4" />,
		keywords: ['create', 'document'],
		onSelect: () => console.log('Creating new file...'),
	},
	{
		id: 'open-settings',
		label: 'Open Settings',
		description: 'Configure application preferences',
		group: 'View',
		icon: <SettingsIcon className="h-4 w-4" />,
		keywords: ['preferences', 'config'],
		onSelect: () => console.log('Opening settings...'),
	},
]

export default function Example() {
	const [open, setOpen] = useState(false)

	// Open with Cmd+K
	useEffect(() => {
		const handleKeyDown = (e: KeyboardEvent) => {
			if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
				e.preventDefault()
				setOpen(true)
			}
		}
		document.addEventListener('keydown', handleKeyDown)
		return () => document.removeEventListener('keydown', handleKeyDown)
	}, [])

	return (
		<>
			<Button onClick={() => setOpen(true)}>
				Open Command Palette
			</Button>
			
			<CommandPalette
				open={open}
				onOpenChange={setOpen}
				items={commands}
				placeholder="Type a command or search..."
			/>
		</>
	)