# Command

A searchable command palette for quickly finding and executing actions or navigating.

### **Import**
```tsx
import { Command } from '@app-studio/web';
```

### **Default**
```tsx
import React, { useState } from 'react';
import { Command } from '../Command';
import { Button } from '../../Button/Button';
import {
  HomeIcon,
  SettingsIcon,
  UserIcon,
  InfoIcon,
  SearchIcon,
} from '../../Icon/Icon';

export const DefaultCommand = () => {
  const [open, setOpen] = useState(false);

  const commands = [
    {
      id: 'home',
      name: 'Home',
      description: 'Go to home page',
      icon: <HomeIcon widthHeight={16} />,
      shortcut: '⌘H',
      onSelect: () => console.log('Home selected'),
    },
    {
      id: 'settings',
      name: 'Settings',
      description: 'Open settings page',
      icon: <SettingsIcon widthHeight={16} />,
      shortcut: '⌘S',
      onSelect: () => console.log('Settings selected'),
    },
    {
      id: 'profile',
      name: 'Profile',
      description: 'View your profile',
      icon: <UserIcon widthHeight={16} />,
      shortcut: '⌘P',
      onSelect: () => console.log('Profile selected'),
    },
    {
      id: 'help',
      name: 'Help',
      description: 'Get help and support',
      icon: <InfoIcon widthHeight={16} />,
      shortcut: '⌘?',
      onSelect: () => console.log('Help selected'),
    },
    {
      id: 'search',
      name: 'Search',
      description: 'Search for content',
      icon: <SearchIcon widthHeight={16} />,
      shortcut: '⌘K',
      onSelect: () => console.log('Search selected'),
    },
  ];

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
      <Command
        open={open}
        onOpenChange={setOpen}
        commands={commands}
        placeholder="Search commands..."
      />
    </>
  );
};
```

### **groups**
Optional array of command groups to display within the component.

- **Type:** `CommandGroup[]`
- **Default:** `[]`
- **Possible Values:** `N/A`

```tsx
import React, { useState } from 'react';
import { Command } from '../Command';
import { Button } from '../../Button/Button';
import {
  HomeIcon,
  SettingsIcon,
  UserIcon,
  EditIcon,
  DustBinIcon,
  CopyIcon,
  PlayIcon,
  PauseIcon,
} from '../../Icon/Icon';

export const GroupedCommand = () => {
  const [open, setOpen] = useState(false);

  const groups = [
    {
      id: 'navigation',
      name: 'Navigation',
      commands: [
        {
          id: 'home',
          name: 'Home',
          description: 'Go to home page',
          icon: <HomeIcon widthHeight={16} />,
          shortcut: '⌘H',
          onSelect: () => console.log('Home selected'),
        },
        {
          id: 'settings',
          name: 'Settings',
          description: 'Open settings page',
          icon: <SettingsIcon widthHeight={16} />,
          shortcut: '⌘S',
          onSelect: () => console.log('Settings selected'),
        },
        {
          id: 'profile',
          name: 'Profile',
          description: 'View your profile',
          icon: <UserIcon widthHeight={16} />,
          shortcut: '⌘P',
          onSelect: () => console.log('Profile selected'),
        },
      ],
    },
    {
      id: 'actions',
      name: 'Actions',
      commands: [
        {
          id: 'edit',
          name: 'Edit',
          description: 'Edit current document',
          icon: <EditIcon widthHeight={16} />,
          shortcut: '⌘E',
          onSelect: () => console.log('Edit selected'),
        },
        {
          id: 'delete',
          name: 'Delete',
          description: 'Delete current document',
          icon: <DustBinIcon widthHeight={16} />,
          shortcut: '⌘⌫',
          onSelect: () => console.log('Delete selected'),
        },
        {
          id: 'copy',
          name: 'Copy',
          description: 'Copy to clipboard',
          icon: <CopyIcon widthHeight={16} />,
          shortcut: '⌘C',
          onSelect: () => console.log('Copy selected'),
        },
      ],
    },
    {
      id: 'media',
      name: 'Media Controls',
      commands: [
        {
          id: 'play',
          name: 'Play',
          description: 'Play media',
          icon: <PlayIcon widthHeight={16} />,
          shortcut: 'Space',
          onSelect: () => console.log('Play selected'),
        },
        {
          id: 'pause',
          name: 'Pause',
          description: 'Pause media',
          icon: <PauseIcon widthHeight={16} />,
          shortcut: 'Space',
          onSelect: () => console.log('Pause selected'),
        },
      ],
    },
  ];

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Open Grouped Command Palette
      </Button>
      <Command
        open={open}
        onOpenChange={setOpen}
        groups={groups}
        placeholder="Search commands..."
      />
    </>
  );
};
```

### **Customized**

```tsx
import React, { useState } from 'react';
import { Command } from '../Command';
import { Button } from '../../Button/Button';
import { Text } from 'app-studio';
import { Horizontal } from 'app-studio';
import { HomeIcon, SettingsIcon, UserIcon } from '../../Icon/Icon';

export const CustomizedCommand = () => {
  const [open, setOpen] = useState(false);

  const commands = [
    {
      id: 'home',
      name: 'Home',
      description: 'Go to home page',
      icon: <HomeIcon widthHeight={16} />,
      shortcut: '⌘H',
      onSelect: () => console.log('Home selected'),
    },
    {
      id: 'settings',
      name: 'Settings',
      description: 'Open settings page',
      icon: <SettingsIcon widthHeight={16} />,
      shortcut: '⌘S',
      onSelect: () => console.log('Settings selected'),
    },
    {
      id: 'profile',
      name: 'Profile',
      description: 'View your profile',
      icon: <UserIcon widthHeight={16} />,
      shortcut: '⌘P',
      onSelect: () => console.log('Profile selected'),
    },
  ];

  const customEmptyState = (
    <Horizontal
      alignItems="center"
      justifyContent="center"
      padding="24px"
      flexDirection="column"
    >
      <Text fontSize="16px" fontWeight="bold" color="color-gray-600">
        No commands found
      </Text>
      <Text fontSize="14px" color="color-gray-500" marginTop="8px">
        Try a different search term
      </Text>
    </Horizontal>
  );

  const customFooter = (
    <Horizontal justifyContent="space-between" width="100%">
      <Text color="color-gray-500">Press ↑↓ to navigate</Text>
      <Text color="color-gray-500">Press Enter to select</Text>
      <Text color="color-gray-500">Press Esc to close</Text>
    </Horizontal>
  );

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Customized Command</Button>
      <Command
        open={open}
        onOpenChange={setOpen}
        commands={commands}
        placeholder="Search commands..."
        emptyState={customEmptyState}
        footer={customFooter}
        views={{
          container: {
            backgroundColor: 'color-blue-50',
            borderColor: 'color-blue-200',
            borderWidth: '2px',
            borderRadius: '12px',
          },
          searchInput: {
            container: {
              backgroundColor: 'color-white',
              borderBottomColor: 'color-blue-200',
            },
            input: {
              color: 'color-blue-800',
              fontWeight: 'medium',
            },
          },
          item: {
            backgroundColor: 'transparent',
            borderRadius: '8px',
            _hover: {
              backgroundColor: 'color-blue-100',
            },
          },
          selectedItem: {
            backgroundColor: 'color-blue-200',
            _hover: {
              backgroundColor: 'color-blue-300',
            },
          },
          name: {
            color: 'color-blue-800',
            fontWeight: 'bold',
          },
          description: {
            color: 'color-blue-600',
          },
          shortcut: {
            backgroundColor: 'color-white',
            padding: '2px 6px',
            borderRadius: '4px',
            fontWeight: 'bold',
          },
          footer: {
            backgroundColor: 'color-white',
            borderTopColor: 'color-blue-200',
          },
        }}
      />
    </>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './groups';
export * from './variants';
export * from './sizes';
export * from './customized';
```

### **Sizes**

```tsx
import React, { useState } from 'react';
import { Command } from '../Command';
import { Button } from '../../Button/Button';
import { Horizontal } from 'app-studio';
import { HomeIcon, SettingsIcon, UserIcon } from '../../Icon/Icon';

export const CommandSizes = () => {
  const [smallOpen, setSmallOpen] = useState(false);
  const [mediumOpen, setMediumOpen] = useState(false);
  const [largeOpen, setLargeOpen] = useState(false);

  const commands = [
    {
      id: 'home',
      name: 'Home',
      description: 'Go to home page',
      icon: <HomeIcon widthHeight={16} />,
      shortcut: '⌘H',
      onSelect: () => console.log('Home selected'),
    },
    {
      id: 'settings',
      name: 'Settings',
      description: 'Open settings page',
      icon: <SettingsIcon widthHeight={16} />,
      shortcut: '⌘S',
      onSelect: () => console.log('Settings selected'),
    },
    {
      id: 'profile',
      name: 'Profile',
      description: 'View your profile',
      icon: <UserIcon widthHeight={16} />,
      shortcut: '⌘P',
      onSelect: () => console.log('Profile selected'),
    },
  ];

  return (
    <Horizontal gap={10}>
      <Button onClick={() => setSmallOpen(true)}>Small Size</Button>
      <Button onClick={() => setMediumOpen(true)}>Medium Size</Button>
      <Button onClick={() => setLargeOpen(true)}>Large Size</Button>

      <Command
        open={smallOpen}
        onOpenChange={setSmallOpen}
        commands={commands}
        size="sm"
        placeholder="Search commands..."
      />

      <Command
        open={mediumOpen}
        onOpenChange={setMediumOpen}
        commands={commands}
        size="md"
        placeholder="Search commands..."
      />

      <Command
        open={largeOpen}
        onOpenChange={setLargeOpen}
        commands={commands}
        size="lg"
        placeholder="Search commands..."
      />
    </Horizontal>
  );
};
```

### **Variants**

```tsx
import React, { useState } from 'react';
import { Command } from '../Command';
import { Button } from '../../Button/Button';
import { Horizontal } from 'app-studio';
import { HomeIcon, SettingsIcon, UserIcon } from '../../Icon/Icon';

export const CommandVariants = () => {
  const [defaultOpen, setDefaultOpen] = useState(false);
  const [filledOpen, setFilledOpen] = useState(false);
  const [outlineOpen, setOutlineOpen] = useState(false);

  const commands = [
    {
      id: 'home',
      name: 'Home',
      description: 'Go to home page',
      icon: <HomeIcon widthHeight={16} />,
      shortcut: '⌘H',
      onSelect: () => console.log('Home selected'),
    },
    {
      id: 'settings',
      name: 'Settings',
      description: 'Open settings page',
      icon: <SettingsIcon widthHeight={16} />,
      shortcut: '⌘S',
      onSelect: () => console.log('Settings selected'),
    },
    {
      id: 'profile',
      name: 'Profile',
      description: 'View your profile',
      icon: <UserIcon widthHeight={16} />,
      shortcut: '⌘P',
      onSelect: () => console.log('Profile selected'),
    },
  ];

  return (
    <Horizontal gap={10}>
      <Button onClick={() => setDefaultOpen(true)}>Default Variant</Button>
      <Button onClick={() => setFilledOpen(true)}>Filled Variant</Button>
      <Button onClick={() => setOutlineOpen(true)}>Outline Variant</Button>

      <Command
        open={defaultOpen}
        onOpenChange={setDefaultOpen}
        commands={commands}
        variant="default"
        placeholder="Search commands..."
      />

      <Command
        open={filledOpen}
        onOpenChange={setFilledOpen}
        commands={commands}
        variant="filled"
        placeholder="Search commands..."
      />

      <Command
        open={outlineOpen}
        onOpenChange={setOutlineOpen}
        commands={commands}
        variant="outline"
        placeholder="Search commands..."
      />
    </Horizontal>
  );
};
```