CommandPalette

import { ChartBarIcon, GearIcon, MegaphoneIcon, UserIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { Button, CommandPalette } from '@arbol-ai/ui';

const PaletteExample = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button
        aria-keyshortcuts="Control+K Meta+K"
        onPress={() => {
          setIsOpen(true);
        }}
        variant="outline"
      >
        Search
      </Button>
      <CommandPalette
        groups={[
          {
            id: 'pages',
            title: 'Pages',
            items: [
              { id: 'contacts', label: 'Contacts', icon: <UserIcon />, href: '#/command-palette' },
              { id: 'campaigns', label: 'Campaigns', icon: <MegaphoneIcon />, href: '#/command-palette' },
              { id: 'reports', label: 'Reports', icon: <ChartBarIcon />, href: '#/command-palette' },
              { id: 'settings', label: 'Settings', icon: <GearIcon />, href: '#/command-palette' },
            ],
          },
        ]}
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        recent={[{ id: 'ana', label: 'Ana Torres', description: '+57 300 555 0101', icon: <UserIcon /> }]}
      />
    </>
  );
};

<PaletteExample />

import { useState } from 'react';
import { Button, ShortcutsDialog } from '@arbol-ai/ui';

const ShortcutsExample = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button
        aria-keyshortcuts="?"
        onPress={() => {
          setIsOpen(true);
        }}
        variant="outline"
      >
        Keyboard shortcuts
      </Button>
      <ShortcutsDialog
        groups={[
          {
            title: 'Anywhere',
            shortcuts: [
              { keys: ['Ctrl', 'K'], label: 'Search contacts, campaigns and pages' },
              { keys: ['?'], label: 'Show these shortcuts' },
              { keys: ['Esc'], label: 'Close a panel or a dialog' },
            ],
          },
          {
            title: 'In the calendar',
            shortcuts: [
              { keys: ['←', '→'], label: 'Previous and next day' },
              { keys: ['T'], label: 'Go to today' },
            ],
          },
        ]}
        isOpen={isOpen}
        onOpenChange={setIsOpen}
      />
    </>
  );
};

<ShortcutsExample />