CommandPalette

import { Button, CommandGroup, CommandItem, CommandPalette, Icon } from '@bindshq/stance-react';

export function Basic() {
  return (
    <CommandPalette
      hotkey={false}
      trigger={
        <Button variant="outline" leadingIcon={<Icon name="search" />}>
          Search…
        </Button>
      }
    >
      <CommandGroup heading="Pages">
        <CommandItem value="Dashboard" icon={<Icon name="home" />} />
        <CommandItem value="My templates" icon={<Icon name="file-text" />} />
        <CommandItem value="Org users" icon={<Icon name="users" />} />
        <CommandItem value="Integrations" icon={<Icon name="link" />} />
      </CommandGroup>
    </CommandPalette>
  );
}

import { Button, CommandGroup, CommandItem, CommandPalette, Icon, toast } from '@bindshq/stance-react';

export function WithActions() {
  return (
    <CommandPalette
      hotkey={false}
      placeholder="Jump to a page or run an action…"
      trigger={<Button leadingIcon={<Icon name="command" />}>Open palette</Button>}
    >
      <CommandGroup heading="Actions">
        <CommandItem
          value="New template"
          keywords={['create']}
          icon={<Icon name="plus" />}
          onSelect={() => toast('Creating a new template…')}
        />
        <CommandItem
          value="Deploy signatures"
          keywords={['publish', 'push']}
          icon={<Icon name="send" />}
          onSelect={() => toast.success('Deployment started')}
        />
        <CommandItem
          value="Toggle theme"
          keywords={['dark', 'light']}
          icon={<Icon name="contrast" />}
        />
      </CommandGroup>
      <CommandGroup heading="Settings">
        <CommandItem value="Billing" icon={<Icon name="credit-card" />} />
        <CommandItem value="Security" icon={<Icon name="shield" />} />
      </CommandGroup>
    </CommandPalette>
  );
}

import * as React from 'react';
import { Button, CommandGroup, CommandItem, CommandPalette, Icon } from '@bindshq/stance-react';

export function GlobalHotkey() {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ display: 'grid', gap: 8, justifyItems: 'center' }}>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        Open (or press ⌘⇧P / Ctrl+Shift+P)
      </Button>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        hotkey="mod+shift+p"
        label="Workspace switcher"
      >
        <CommandGroup heading="Workspaces">
          <CommandItem value="Binds Ltd" icon={<Icon name="building" />} />
          <CommandItem value="eSignify Demo" icon={<Icon name="building" />} />
        </CommandGroup>
      </CommandPalette>
    </div>
  );
}