Command

'use client';

import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@brika/clay/components/command';
import {
  FileText,
  LayoutDashboard,
  Settings,
  User,
} from 'lucide-react';
import { useEffect, useState } from 'react';

/** Modal command palette triggered by Cmd+K, the standard power-user pattern. */
export default function CommandDialogDemo() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((prev) => !prev);
      }
    };
    document.addEventListener('keydown', down);
    return () => document.removeEventListener('keydown', down);
  }, []);

  return (
    <>
      <p className="text-muted-foreground text-sm">
        Press{' '}
        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100">
          <span className="text-xs">⌘</span>K
        </kbd>{' '}
        to open the command palette.
      </p>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Pages">
            <CommandItem onSelect={() => setOpen(false)}>
              <LayoutDashboard />
              Dashboard
            </CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>
              <FileText />
              Documents
            </CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Settings">
            <CommandItem onSelect={() => setOpen(false)}>
              <User />
              Profile
              <CommandShortcut>⌘P</CommandShortcut>
            </CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>
              <Settings />
              Settings
              <CommandShortcut>⌘S</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  );
}

'use client';

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@brika/clay/components/command';
import {
  Calculator,
  Calendar,
  Clock,
  FileText,
  Settings,
  User,
} from 'lucide-react';
/** Three groups, Suggestions, Recent, and Settings, with icons on every item. */
export default function CommandGroupsDemo() {
  return (
    <Command className="rounded-lg border shadow-md w-80">
      <CommandInput placeholder="Search or run a command..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Calendar />
            Open calendar
          </CommandItem>
          <CommandItem>
            <Calculator />
            Open calculator
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Recent">
          <CommandItem>
            <Clock />
            Design review, yesterday
          </CommandItem>
          <CommandItem>
            <FileText />
            Q1 report draft
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <User />
            Account
            <CommandShortcut>⌘A</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Settings />
            Preferences
            <CommandShortcut>⌘,</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

'use client';

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInputControl,
  CommandItem,
  CommandList,
} from '@brika/clay/components/command';
import {
  InputGroup,
  InputGroupAddon,
} from '@brika/clay/components/input-group';
import { Kbd } from '@brika/clay/components/kbd';
import { FileText, LayoutDashboard, Package, Search, User } from 'lucide-react';
import { useState } from 'react';

/**
 * Navbar-style search bar: CommandInputControl embedded in an InputGroup
 * for the focus halo, with CommandList rendered as an absolute dropdown
 * below. The Command palette mode and this detached mode are fully
 * independent parts of the same component tree.
 */
export default function CommandNavbarSearchDemo() {
  const [query, setQuery] = useState('');

  return (
    <div className="w-full max-w-sm">
      <Command shouldFilter={false} className="relative overflow-visible bg-transparent shadow-none">
        <InputGroup>
          <InputGroupAddon align="inline-start">
            <Search className="size-4" />
          </InputGroupAddon>
          <CommandInputControl
            placeholder="Search..."
            value={query}
            onValueChange={setQuery}
          />
          <InputGroupAddon align="inline-end">
            <Kbd>K</Kbd>
          </InputGroupAddon>
        </InputGroup>
        {query.length > 0 && (
          <CommandList className="absolute top-full left-0 z-50 mt-2 w-full rounded-input border border-input-group-border bg-popover text-popover-foreground shadow-overlay">
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Pages">
              <CommandItem onSelect={() => setQuery('')}>
                <LayoutDashboard />
                Dashboard
              </CommandItem>
              <CommandItem onSelect={() => setQuery('')}>
                <FileText />
                Documents
              </CommandItem>
            </CommandGroup>
            <CommandGroup heading="Packages">
              <CommandItem onSelect={() => setQuery('')}>
                <Package />
                @brika/clay
              </CommandItem>
              <CommandItem onSelect={() => setQuery('')}>
                <User />
                Profile
              </CommandItem>
            </CommandGroup>
          </CommandList>
        )}
      </Command>
    </div>
  );
}