Command

'use client';
 
import React from 'react';
import { Command, useCommandState } from 'ui-lab-components/command'
import { Button } from 'ui-lab-components/button';
 
export const metadata = {
  title: 'Basic Command Palette',
  description: 'A searchable command palette with keyboard shortcuts. Click the button to open.'
};
 
export default function Example() {
  const command = useCommandState();
 
  const commands = [
    {
      id: 'search',
      label: 'Search',
      description: 'Search documents',
      shortcut: '⌘F',
      action: () => console.log('Search'),
    },
    {
      id: 'create',
      label: 'Create new',
      description: 'Create a new document',
      shortcut: '⌘N',
      action: () => console.log('Create'),
    },
    {
      id: 'settings',
      label: 'Settings',
      description: 'Open application settings',
      shortcut: '⌘,',
      action: () => console.log('Settings'),
    },
  ];
 
  return (
    <>
      <Command.Trigger state={command} asChild>
        <Button>Open Palette</Button>
      </Command.Trigger>
      <Command
        state={command}
        items={commands}
      >
        <Command.Input placeholder="Search commands..." />
        <Command.List>
          <Command.Groups
            renderCategory={(category) =>
              category ? <Command.Category>{category}</Command.Category> : null
            }
            renderItem={(cmd) => (
              <Command.Item
                key={cmd.id}
                value={cmd.id}
                textValue={cmd.label}
                action={cmd.action}
                hint={cmd.shortcut}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontWeight: 500 }}>{cmd.label}</div>
                    {cmd.description && (
                      <div style={{ fontSize: '0.875em', opacity: 0.7 }}>
                        {cmd.description}
                      </div>
                    )}
                  </div>
                </div>
              </Command.Item>
            )}
          />
        </Command.List>
      </Command>
    </>
  );
}