Command

TSX
"use client";

import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

type Country = { value: string; label: string; code: string };

const countries: Country[] = [
  { value: "au", label: "Australia", code: "+61" },
  { value: "br", label: "Brazil", code: "+55" },
  { value: "ca", label: "Canada", code: "+1" },
  { value: "de", label: "Germany", code: "+49" },
  { value: "in", label: "India", code: "+91" },
  { value: "jp", label: "Japan", code: "+81" },
  { value: "mx", label: "Mexico", code: "+52" },
  { value: "ng", label: "Nigeria", code: "+234" },
  { value: "tr", label: "Türkiye", code: "+90" },
  { value: "gb", label: "United Kingdom", code: "+44" },
  { value: "us", label: "United States", code: "+1" },
];

export default function Command01() {
  return (
    <Command
      items={countries}
      className="w-full max-w-xs border border-border shadow-xs"
    >
      <CommandInput
        placeholder="Search countries..."
        aria-label="Search country calling codes"
      />
      <CommandList className="max-h-60">
        {(country: Country) => (
          <CommandItem key={country.value} value={country}>
            <span className="truncate">{country.label}</span>
            <span className="ml-auto text-xs text-muted-foreground tabular-nums">
              {country.code}
            </span>
          </CommandItem>
        )}
      </CommandList>
      <CommandEmpty>No country matches that name.</CommandEmpty>
    </Command>
  );
}

TSX
"use client";

import type * as React from "react";

import {
  CodeIcon,
  Heading2Icon,
  ImageIcon,
  ListChecksIcon,
  QuoteIcon,
  TableIcon,
} from "lucide-react";

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

type Block = {
  value: string;
  label: string;
  description: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
};

type Group = { value: string; items: Block[] };

const groups: Group[] = [
  {
    value: "Text",
    items: [
      {
        value: "heading",
        label: "Heading",
        description: "Section title for longer pages.",
        icon: Heading2Icon,
      },
      {
        value: "checklist",
        label: "Checklist",
        description: "Track tasks with checkboxes.",
        icon: ListChecksIcon,
      },
      {
        value: "quote",
        label: "Quote",
        description: "Call out a customer or source.",
        icon: QuoteIcon,
      },
    ],
  },
  {
    value: "Media & data",
    items: [
      {
        value: "image",
        label: "Image",
        description: "Upload or embed a picture.",
        icon: ImageIcon,
      },
      {
        value: "table",
        label: "Table",
        description: "Rows and columns of structured data.",
        icon: TableIcon,
      },
      {
        value: "code",
        label: "Code block",
        description: "Syntax-highlighted snippet.",
        icon: CodeIcon,
      },
    ],
  },
];

export default function Command02() {
  return (
    <Command
      items={groups}
      className="w-full max-w-sm border border-border shadow-md"
    >
      <CommandInput placeholder="Insert a block..." aria-label="Search blocks" />
      <CommandList className="max-h-80">
        {(group: Group) => (
          <CommandGroup key={group.value} heading={group.value} items={group.items}>
            {(block: Block) => (
              <CommandItem key={block.value} value={block} className="gap-3 py-2">
                <span className="flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-muted-foreground group-data-highlighted/command-item:text-foreground">
                  <block.icon aria-hidden="true" />
                </span>
                <span className="flex min-w-0 flex-col gap-0.5">
                  <span className="font-medium">{block.label}</span>
                  <span className="truncate text-xs text-muted-foreground">
                    {block.description}
                  </span>
                </span>
              </CommandItem>
            )}
          </CommandGroup>
        )}
      </CommandList>
      <CommandEmpty>No block type matches your search.</CommandEmpty>
    </Command>
  );
}

TSX
"use client";

import * as React from "react";

import {
  ArchiveIcon,
  CopyIcon,
  DownloadIcon,
  LockIcon,
  PencilIcon,
  ShieldCheckIcon,
  Trash2Icon,
  UsersIcon,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

type Action = {
  value: string;
  label: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  shortcut?: string;
  locked?: boolean;
  destructive?: boolean;
};

type Group = { value: string; items: Action[] };

const groups: Group[] = [
  {
    value: "Project",
    items: [
      { value: "rename", label: "Rename project", icon: PencilIcon, shortcut: "F2" },
      { value: "duplicate", label: "Duplicate", icon: CopyIcon, shortcut: "⌘D" },
      { value: "export", label: "Export as CSV", icon: DownloadIcon },
    ],
  },
  {
    value: "Team plan",
    items: [
      { value: "guests", label: "Invite guests", icon: UsersIcon, locked: true },
      { value: "sso", label: "Enforce SSO", icon: ShieldCheckIcon, locked: true },
    ],
  },
  {
    value: "Danger zone",
    items: [
      { value: "archive", label: "Archive project", icon: ArchiveIcon },
      {
        value: "delete",
        label: "Delete project",
        icon: Trash2Icon,
        shortcut: "⌘⌫",
        destructive: true,
      },
    ],
  },
];

export default function Command03() {
  const [lastAction, setLastAction] = React.useState<string | null>(null);

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Command items={groups} className="border border-border shadow-md">
        <CommandInput
          placeholder="Search project actions..."
          aria-label="Search project actions"
        />
        <CommandList className="max-h-96">
          {(group: Group, index: number) => (
            <React.Fragment key={group.value}>
              {index > 0 && <CommandSeparator className="my-1" />}
              <CommandGroup heading={group.value} items={group.items}>
                {(action: Action) => (
                  <CommandItem
                    key={action.value}
                    value={action}
                    disabled={action.locked}
                    onClick={() => setLastAction(action.label)}
                    className={
                      action.destructive
                        ? "text-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive data-highlighted:*:[svg]:text-destructive"
                        : undefined
                    }
                  >
                    <action.icon aria-hidden="true" />
                    {action.label}
                    {action.locked ? (
                      <Badge variant="outline" className="ml-auto gap-1">
                        <LockIcon aria-hidden="true" />
                        Team
                      </Badge>
                    ) : (
                      action.shortcut && (
                        <CommandShortcut
                          className={
                            action.destructive
                              ? "text-destructive/70 group-data-highlighted/command-item:text-destructive"
                              : undefined
                          }
                        >
                          {action.shortcut}
                        </CommandShortcut>
                      )
                    )}
                  </CommandItem>
                )}
              </CommandGroup>
            </React.Fragment>
          )}
        </CommandList>
        <CommandEmpty>No action matches your search.</CommandEmpty>
      </Command>
      <p className="px-1 text-xs text-muted-foreground" aria-live="polite">
        {lastAction
          ? `Ran “${lastAction}”.`
          : "Locked actions need the Team plan."}
      </p>
    </div>
  );
}

TSX
"use client";

import * as React from "react";

import { FileTextIcon, HashIcon, UserIcon } from "lucide-react";

import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

type Scope = "all" | "docs" | "channels" | "people";

type Result = {
  value: string;
  label: string;
  meta: string;
  scope: Exclude<Scope, "all">;
};

const scopes: { value: Scope; label: string }[] = [
  { value: "all", label: "All" },
  { value: "docs", label: "Docs" },
  { value: "channels", label: "Channels" },
  { value: "people", label: "People" },
];

const scopeIcons = {
  docs: FileTextIcon,
  channels: HashIcon,
  people: UserIcon,
};

const results: Result[] = [
  { value: "q3-roadmap", label: "Q3 roadmap", meta: "Edited 2h ago", scope: "docs" },
  { value: "release-notes", label: "Release notes 4.2", meta: "Edited yesterday", scope: "docs" },
  { value: "onboarding", label: "Onboarding checklist", meta: "Edited Mon", scope: "docs" },
  { value: "design-review", label: "design-review", meta: "18 members", scope: "channels" },
  { value: "releases", label: "releases", meta: "42 members", scope: "channels" },
  { value: "support-escalations", label: "support-escalations", meta: "9 members", scope: "channels" },
  { value: "rosa", label: "Rosa Delgado", meta: "Release manager", scope: "people" },
  { value: "noah", label: "Noah Fischer", meta: "Support lead", scope: "people" },
];

function Highlight({ text, query }: { text: string; query: string }) {
  const index = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;
  if (index === -1) return <>{text}</>;
  return (
    <>
      {text.slice(0, index)}
      <mark className="rounded-xs bg-primary/15 text-foreground">
        {text.slice(index, index + query.length)}
      </mark>
      {text.slice(index + query.length)}
    </>
  );
}

export default function Command04() {
  const [query, setQuery] = React.useState("re");
  const [scope, setScope] = React.useState<Scope>("all");

  const trimmed = query.trim();
  const visible = results.filter(
    (result) =>
      (scope === "all" || result.scope === scope) &&
      result.label.toLowerCase().includes(trimmed.toLowerCase()),
  );

  return (
    <Command
      items={visible}
      mode="none"
      value={query}
      onValueChange={setQuery}
      className="w-full max-w-sm border border-border shadow-md"
    >
      <CommandInput placeholder="Search workspace..." aria-label="Search workspace" />
      <div className="flex items-center justify-between gap-2 px-1 pt-2 pb-1">
        <ToggleGroup
          aria-label="Search scope"
          size="sm"
          value={[scope]}
          onValueChange={(next) => {
            // Keep one scope selected at all times.
            if (next.length > 0) setScope(next[0] as Scope);
          }}
          className="min-w-0"
        >
          {scopes.map((item) => (
            <ToggleGroupItem
              key={item.value}
              value={item.value}
              className="h-7 px-2 text-xs aria-pressed:bg-accent aria-pressed:text-accent-foreground"
            >
              {item.label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
        <span
          className="shrink-0 pr-1 text-xs text-muted-foreground tabular-nums max-sm:sr-only"
          aria-live="polite"
        >
          {visible.length} {visible.length === 1 ? "result" : "results"}
        </span>
      </div>
      <CommandList>
        {(result: Result) => {
          const Icon = scopeIcons[result.scope];
          return (
            <CommandItem key={result.value} value={result}>
              <Icon aria-hidden="true" className="text-muted-foreground" />
              <span className="truncate">
                <Highlight text={result.label} query={trimmed} />
              </span>
              <span className="ml-auto shrink-0 text-xs text-muted-foreground">
                {result.meta}
              </span>
            </CommandItem>
          );
        }}
      </CommandList>
      <CommandEmpty>
        Nothing in {scope === "all" ? "this workspace" : scope} matches “{trimmed}”.
      </CommandEmpty>
    </Command>
  );
}

TSX
"use client";

import * as React from "react";

import { CircleAlertIcon, ReceiptTextIcon, RotateCwIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Label } from "@/components/ui/label";
import { Skeleton } from "@/components/ui/skeleton";
import { Spinner } from "@/components/ui/spinner";
import { Switch } from "@/components/ui/switch";

type Invoice = {
  value: string;
  label: string;
  customer: string;
  amount: string;
};

type Status = "loading" | "error" | "ready";

const invoices: Invoice[] = [
  { value: "inv-2041", label: "INV-2041", customer: "Northwind Traders", amount: "$4,200.00" },
  { value: "inv-2042", label: "INV-2042", customer: "Globex Logistics", amount: "$860.50" },
  { value: "inv-2043", label: "INV-2043", customer: "Northwind Traders", amount: "$1,125.00" },
  { value: "inv-2044", label: "INV-2044", customer: "Acme Studio", amount: "$12,480.00" },
  { value: "inv-2045", label: "INV-2045", customer: "Brightline Health", amount: "$399.00" },
];

// Simulated network latency for the fake request.
const LATENCY_MS = 700;

export default function Command05() {
  const [query, setQuery] = React.useState("");
  const [offline, setOffline] = React.useState(false);
  const [status, setStatus] = React.useState<Status>("loading");
  const [items, setItems] = React.useState<Invoice[]>([]);
  const [attempt, setAttempt] = React.useState(0);

  React.useEffect(() => {
    // `attempt` re-runs the request when the user presses Retry.
    void attempt;
    setStatus("loading");
    const timer = window.setTimeout(() => {
      if (offline) {
        setStatus("error");
        setItems([]);
        return;
      }
      const needle = query.trim().toLowerCase();
      setItems(
        invoices.filter((invoice) =>
          `${invoice.label} ${invoice.customer}`.toLowerCase().includes(needle),
        ),
      );
      setStatus("ready");
    }, LATENCY_MS);
    return () => window.clearTimeout(timer);
  }, [query, offline, attempt]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Command
        items={status === "ready" ? items : []}
        mode="none"
        value={query}
        onValueChange={setQuery}
        className="border border-border shadow-md"
      >
        <CommandInput
          placeholder="Search invoices or customers..."
          aria-label="Search invoices"
        />
        <div
          className="flex h-7 items-center gap-1.5 px-3 pt-1 text-xs text-muted-foreground"
          aria-live="polite"
        >
          {status === "loading" && (
            <>
              <Spinner className="size-3" aria-hidden="true" />
              Searching billing records…
            </>
          )}
          {status === "ready" &&
            `${items.length} ${items.length === 1 ? "invoice" : "invoices"} found`}
          {status === "error" && (
            <span className="text-destructive">Request failed</span>
          )}
        </div>
        {status === "loading" && (
          <div className="flex flex-col gap-1 p-1" aria-hidden="true">
            {[0, 1, 2].map((row) => (
              <div key={row} className="flex items-center gap-3 px-2 py-1.5">
                <Skeleton className="size-4 rounded-sm" />
                <Skeleton className="h-3.5 w-24" />
                <Skeleton className="ml-auto h-3.5 w-14" />
              </div>
            ))}
          </div>
        )}
        {status === "error" && (
          <div
            role="alert"
            className="m-1 flex flex-col items-center gap-2 rounded-lg bg-destructive/5 px-4 py-6 text-center"
          >
            <CircleAlertIcon aria-hidden="true" className="size-5 text-destructive" />
            <p className="text-sm font-medium">Couldn’t reach the billing service</p>
            <p className="text-xs text-muted-foreground">
              Check your connection, then try the search again.
            </p>
            <Button
              size="sm"
              variant="outline"
              className="mt-1"
              onClick={() => setAttempt((count) => count + 1)}
            >
              <RotateCwIcon aria-hidden="true" data-icon="inline-start" />
              Retry
            </Button>
          </div>
        )}
        <CommandList>
          {(invoice: Invoice) => (
            <CommandItem key={invoice.value} value={invoice}>
              <ReceiptTextIcon aria-hidden="true" className="text-muted-foreground" />
              <span className="shrink-0 font-mono text-xs whitespace-nowrap tabular-nums">{invoice.label}</span>
              <span className="truncate text-muted-foreground">{invoice.customer}</span>
              <span className="ml-auto shrink-0 tabular-nums">{invoice.amount}</span>
            </CommandItem>
          )}
        </CommandList>
        {status === "ready" && (
          <CommandEmpty>No invoice matches “{query.trim()}”.</CommandEmpty>
        )}
      </Command>
      <div className="flex items-center gap-2 px-1">
        <Switch
          id="command-05-offline"
          size="sm"
          checked={offline}
          onCheckedChange={setOffline}
        />
        <Label htmlFor="command-05-offline" className="text-xs font-normal">
          Simulate offline
        </Label>
      </div>
    </div>
  );
}

TSX
"use client";

import * as React from "react";

import { CheckIcon, XIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

type IssueLabel = { value: string; label: string; dot: string };

const labels: IssueLabel[] = [
  { value: "bug", label: "Bug", dot: "bg-destructive" },
  { value: "feature", label: "Feature request", dot: "bg-chart-1" },
  { value: "performance", label: "Performance", dot: "bg-chart-2" },
  { value: "accessibility", label: "Accessibility", dot: "bg-chart-3" },
  { value: "docs", label: "Documentation", dot: "bg-chart-4" },
  { value: "design", label: "Design", dot: "bg-chart-5" },
  { value: "regression", label: "Regression", dot: "bg-warning" },
  { value: "good-first-issue", label: "Good first issue", dot: "bg-success" },
];

export default function Command06() {
  const [selected, setSelected] = React.useState<string[]>(["bug", "performance"]);

  function toggle(value: string) {
    setSelected((current) =>
      current.includes(value)
        ? current.filter((item) => item !== value)
        : [...current, value],
    );
  }

  const chosen = labels.filter((label) => selected.includes(label.value));

  return (
    <Command items={labels} className="w-full max-w-xs border border-border shadow-md">
      <div className="flex min-h-9 flex-wrap items-center gap-1 px-2 pt-1.5 pb-1">
        {chosen.length === 0 ? (
          <span className="text-xs text-muted-foreground">No labels applied</span>
        ) : (
          chosen.map((label) => (
            <Badge key={label.value} variant="outline" className="gap-1.5 pr-0.5">
              <span aria-hidden="true" className={`size-1.5 rounded-full ${label.dot}`} />
              {label.label}
              <button
                type="button"
                aria-label={`Remove ${label.label}`}
                onClick={() => toggle(label.value)}
                className="inline-flex size-4 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
              >
                <XIcon aria-hidden="true" />
              </button>
            </Badge>
          ))
        )}
      </div>
      <CommandInput placeholder="Filter labels..." aria-label="Filter labels" />
      <CommandList aria-multiselectable="true" className="mt-1 max-h-64">
        {(label: IssueLabel) => {
          const isSelected = selected.includes(label.value);
          return (
            <CommandItem
              key={label.value}
              value={label}
              aria-selected={isSelected}
              onClick={() => toggle(label.value)}
            >
              <span
                aria-hidden="true"
                data-checked={isSelected ? "" : undefined}
                className="flex size-4 items-center justify-center rounded-[4px] border border-input transition-colors data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground"
              >
                <CheckIcon
                  className="size-3 scale-50 opacity-0 transition-[opacity,scale] duration-150 ease-out in-data-checked:scale-100 in-data-checked:opacity-100"
                />
              </span>
              <span aria-hidden="true" className={`size-2 rounded-full ${label.dot}`} />
              {label.label}
            </CommandItem>
          );
        }}
      </CommandList>
      <CommandEmpty>No label with that name.</CommandEmpty>
      <div className="mt-1 flex items-center justify-between border-t border-border px-2 pt-1.5 pb-0.5">
        <span className="text-xs text-muted-foreground tabular-nums" aria-live="polite">
          {selected.length} of {labels.length} selected
        </span>
        <Button
          size="xs"
          variant="ghost"
          disabled={selected.length === 0}
          onClick={() => setSelected([])}
        >
          Clear
        </Button>
      </div>
    </Command>
  );
}

TSX
"use client";

import * as React from "react";

import {
  CalculatorIcon,
  CalendarIcon,
  FilePlusIcon,
  MailIcon,
  NotebookPenIcon,
  TerminalIcon,
  TimerIcon,
} from "lucide-react";

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";
import { Kbd } from "@/components/ui/kbd";

type Entry = {
  value: string;
  label: string;
  hint: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  // The calculator answer skips text filtering.
  answer?: boolean;
};

type Group = { value: string; items: Entry[] };

const launchers: Group[] = [
  {
    value: "Applications",
    items: [
      { value: "calendar", label: "Calendar", hint: "Application", icon: CalendarIcon },
      { value: "mail", label: "Mail", hint: "Application", icon: MailIcon },
      { value: "notes", label: "Notes", hint: "Application", icon: NotebookPenIcon },
      { value: "terminal", label: "Terminal", hint: "Application", icon: TerminalIcon },
    ],
  },
  {
    value: "Quick actions",
    items: [
      { value: "new-note", label: "New note", hint: "Notes", icon: FilePlusIcon },
      { value: "focus", label: "Start a 25-minute focus timer", hint: "Clock", icon: TimerIcon },
    ],
  },
];

const numberFormat = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 6,
});

// A tiny recursive-descent parser for + - * / and parentheses. No eval.
function calculate(input: string): number | null {
  const source = input
    .replace(/×/g, "*")
    .replace(/−/g, "-")
    .replace(/÷/g, "/")
    .replace(/,/g, "");
  if (!/^[\d\s.+\-*/()]+$/.test(source) || !/\d\s*[+\-*/]/.test(source)) {
    return null;
  }
  const tokens = source.match(/\d*\.?\d+|[+\-*/()]/g) ?? [];
  let position = 0;

  function factor(): number {
    const token = tokens[position++];
    if (token === "-") return -factor();
    if (token === "(") {
      const value = expression();
      if (tokens[position++] !== ")") throw new Error("Unclosed parenthesis");
      return value;
    }
    const value = Number(token);
    if (token === undefined || Number.isNaN(value)) {
      throw new Error("Expected a number");
    }
    return value;
  }

  function term(): number {
    let value = factor();
    while (tokens[position] === "*" || tokens[position] === "/") {
      const operator = tokens[position++];
      const next = factor();
      value = operator === "*" ? value * next : value / next;
    }
    return value;
  }

  function expression(): number {
    let value = term();
    while (tokens[position] === "+" || tokens[position] === "-") {
      const operator = tokens[position++];
      const next = term();
      value = operator === "+" ? value + next : value - next;
    }
    return value;
  }

  try {
    const result = expression();
    return position === tokens.length && Number.isFinite(result) ? result : null;
  } catch {
    return null;
  }
}

export default function Command07() {
  const [query, setQuery] = React.useState("1450 * 0.18");
  const [status, setStatus] = React.useState("");

  const result = calculate(query);
  const groups: Group[] =
    result === null
      ? launchers
      : [
          {
            value: "Calculator",
            items: [
              {
                value: "answer",
                label: numberFormat.format(result),
                hint: query.trim().replace(/\*/g, "×").replace(/\//g, "÷"),
                icon: CalculatorIcon,
                answer: true,
              },
            ],
          },
          ...launchers,
        ];

  function run(entry: Entry) {
    if (entry.answer) {
      navigator.clipboard?.writeText(entry.label).catch(() => {});
      setStatus(`Copied ${entry.label} to the clipboard.`);
      return;
    }
    setStatus(`Opening ${entry.label}…`);
  }

  return (
    <Command
      items={groups}
      value={query}
      onValueChange={(next, details) => {
        if (details.reason === "item-press") return;
        setQuery(next);
        setStatus("");
      }}
      filter={(item, value) => {
        const entry = item as Entry;
        return (
          entry.answer === true ||
          entry.label.toLowerCase().includes(value.trim().toLowerCase())
        );
      }}
      className="w-full max-w-md border border-border shadow-lg"
    >
      <CommandInput
        placeholder="Search apps, or type a sum like 24 * 7"
        aria-label="Search apps and actions, or calculate"
      />
      <CommandList className="mt-1">
        {(group: Group) => (
          <CommandGroup key={group.value} heading={group.value} items={group.items}>
            {(entry: Entry) =>
              entry.answer ? (
                <CommandItem
                  key={entry.value}
                  value={entry}
                  onClick={() => run(entry)}
                  className="gap-3 py-2.5"
                >
                  <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
                    <entry.icon aria-hidden="true" />
                  </span>
                  <span className="flex min-w-0 flex-col">
                    <span className="truncate text-xl font-semibold tracking-tight tabular-nums">
                      <span className="sr-only">Result: </span>
                      {entry.label}
                    </span>
                    <span className="truncate text-xs text-muted-foreground tabular-nums">
                      {entry.hint}
                    </span>
                  </span>
                  <CommandShortcut className="tracking-normal">Copy</CommandShortcut>
                </CommandItem>
              ) : (
                <CommandItem
                  key={entry.value}
                  value={entry}
                  onClick={() => run(entry)}
                >
                  <entry.icon aria-hidden="true" className="text-muted-foreground" />
                  <span className="truncate">{entry.label}</span>
                  <span className="ml-auto shrink-0 text-xs text-muted-foreground">
                    {entry.hint}
                  </span>
                </CommandItem>
              )
            }
          </CommandGroup>
        )}
      </CommandList>
      <CommandEmpty>No app or action matches “{query.trim()}”.</CommandEmpty>
      <div className="mt-1 flex min-h-9 items-center justify-between gap-3 border-t border-border px-2 pt-1 text-xs text-muted-foreground">
        <span aria-live="polite" className="min-w-0">
          {status || "Math works too: + − × ÷ and parentheses."}
        </span>
        <span className="flex shrink-0 items-center gap-1.5">
          <Kbd>
            <span aria-hidden="true">↵</span>
            <span className="sr-only">Enter</span>
          </Kbd>
          {result === null ? "Open" : "Copy"}
        </span>
      </div>
    </Command>
  );
}

TSX
"use client";

import * as React from "react";
import { CheckIcon, GlobeIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

type Zone = {
  value: string;
  label: string;
  country: string;
  offset: string;
  // Minutes from UTC, used to preview the local send time.
  minutes: number;
};

type Region = { value: string; items: Zone[] };

const regions: Region[] = [
  {
    value: "Americas",
    items: [
      { value: "America/Los_Angeles", label: "Los Angeles", country: "United States", offset: "UTC−7", minutes: -420 },
      { value: "America/New_York", label: "New York", country: "United States", offset: "UTC−4", minutes: -240 },
      { value: "America/Sao_Paulo", label: "São Paulo", country: "Brazil", offset: "UTC−3", minutes: -180 },
    ],
  },
  {
    value: "Europe & Africa",
    items: [
      { value: "Europe/London", label: "London", country: "United Kingdom", offset: "UTC+1", minutes: 60 },
      { value: "Europe/Berlin", label: "Berlin", country: "Germany", offset: "UTC+2", minutes: 120 },
      { value: "Europe/Istanbul", label: "Istanbul", country: "Türkiye", offset: "UTC+3", minutes: 180 },
      { value: "Africa/Lagos", label: "Lagos", country: "Nigeria", offset: "UTC+1", minutes: 60 },
    ],
  },
  {
    value: "Asia & Pacific",
    items: [
      { value: "Asia/Kolkata", label: "Kolkata", country: "India", offset: "UTC+5:30", minutes: 330 },
      { value: "Asia/Singapore", label: "Singapore", country: "Singapore", offset: "UTC+8", minutes: 480 },
      { value: "Asia/Tokyo", label: "Tokyo", country: "Japan", offset: "UTC+9", minutes: 540 },
      { value: "Australia/Sydney", label: "Sydney", country: "Australia", offset: "UTC+10", minutes: 600 },
    ],
  },
];

const allZones = regions.flatMap((region) => region.items);

function matchesZone(zone: Zone, query: string) {
  const needle = query.trim().toLowerCase();
  if (!needle) return true;
  return [zone.label, zone.country, zone.value, zone.offset].some((field) =>
    field.toLowerCase().includes(needle),
  );
}

// The digest goes out at 14:00 UTC; show it in the selected zone.
function digestTime(zone: Zone) {
  const total = (14 * 60 + zone.minutes + 24 * 60) % (24 * 60);
  const hours = Math.floor(total / 60);
  const minutes = total % 60;
  const suffix = hours >= 12 ? "PM" : "AM";
  const display = hours % 12 === 0 ? 12 : hours % 12;
  return `${display}:${minutes.toString().padStart(2, "0")} ${suffix}`;
}

export default function Command08() {
  const [savedZone, setSavedZone] = React.useState("Europe/Berlin");
  const [draftZone, setDraftZone] = React.useState("Europe/Berlin");
  const [query, setQuery] = React.useState("");

  const draft = allZones.find((zone) => zone.value === draftZone) ?? allZones[0];
  const dirty = draftZone !== savedZone;

  return (
    <section
      aria-labelledby="command-08-title"
      className="w-full max-w-md rounded-xl border border-border bg-card text-card-foreground"
    >
      <header className="flex flex-col gap-1 p-4 pb-3">
        <h3 id="command-08-title" className="text-sm font-medium">
          Time zone
        </h3>
        <p className="text-sm text-muted-foreground">
          Due dates, reminders and the daily digest follow this zone.
        </p>
      </header>

      <div className="px-3">
        <Command
          items={regions}
          value={query}
          onValueChange={(next, details) => {
            if (details.reason === "item-press") return;
            setQuery(next);
          }}
          filter={(zone, value) => matchesZone(zone as Zone, value)}
          className="rounded-lg! border border-border bg-background p-0"
        >
          <CommandInput
            placeholder="Search city, country or UTC offset"
            aria-label="Search time zones"
          />
          <CommandList className="max-h-56">
            {(region: Region) => (
              <CommandGroup
                key={region.value}
                heading={region.value}
                items={region.items}
              >
                {(zone: Zone) => {
                  const selected = zone.value === draftZone;
                  return (
                    <CommandItem
                      key={zone.value}
                      value={zone}
                      onClick={() => setDraftZone(zone.value)}
                    >
                      <span className="flex min-w-0 flex-col">
                        <span className="truncate">{zone.label}</span>
                        <span className="truncate text-xs text-muted-foreground">
                          {zone.country}
                        </span>
                      </span>
                      <span className="ml-auto text-xs text-muted-foreground tabular-nums">
                        {zone.offset}
                      </span>
                      <CheckIcon
                        aria-hidden="true"
                        className={selected ? "text-foreground" : "invisible"}
                      />
                      {selected && <span className="sr-only">(selected)</span>}
                    </CommandItem>
                  );
                }}
              </CommandGroup>
            )}
          </CommandList>
          <CommandEmpty>
            No zone matches “{query}”. Try a nearby city.
          </CommandEmpty>
        </Command>
      </div>

      <p
        aria-live="polite"
        className="flex items-start gap-2 px-4 pt-3 text-sm text-muted-foreground"
      >
        <GlobeIcon className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
        <span>
          Your daily digest will arrive at{" "}
          <span className="font-medium text-foreground tabular-nums">
            {digestTime(draft)}
          </span>{" "}
          {draft.label} time.
        </span>
      </p>

      <footer className="mt-3 flex justify-end gap-2 border-t border-border p-3">
        <Button
          variant="ghost"
          disabled={!dirty}
          onClick={() => setDraftZone(savedZone)}
        >
          Reset
        </Button>
        <Button disabled={!dirty} onClick={() => setSavedZone(draftZone)}>
          {dirty ? "Save time zone" : "Saved"}
        </Button>
      </footer>
    </section>
  );
}

TSX
"use client";

import * as React from "react";
import { FilePlusIcon, FileTextIcon, GlobeIcon, Link2OffIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

type Target = {
  value: string;
  label: string;
  detail: string;
  kind: "page" | "url" | "create";
};

type Group = { value: string; items: Target[] };

type Link = { label: string; href: string; external: boolean };

const pages: Target[] = [
  { value: "q4-targets", label: "Q4 targets", detail: "Company / Planning", kind: "page" },
  { value: "okr-guide", label: "How we write OKRs", detail: "Company / Handbook", kind: "page" },
  { value: "roadmap", label: "Product roadmap 2026", detail: "Product", kind: "page" },
  { value: "pricing-review", label: "Pricing review notes", detail: "Product / Research", kind: "page" },
  { value: "hiring-plan", label: "Hiring plan H2", detail: "People / Planning", kind: "page" },
];

const URL_PATTERN = /^(https?:\/\/)?[\w-]+(\.[\w-]+)+(\/\S*)?$/i;

function buildGroups(query: string): Group[] {
  const trimmed = query.trim();
  if (URL_PATTERN.test(trimmed)) {
    const href = /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
    return [
      {
        value: "Web",
        items: [{ value: "url", label: href, detail: "External link", kind: "url" }],
      },
    ];
  }
  const groups: Group[] = [
    { value: trimmed ? "Pages" : "Recent pages", items: pages },
  ];
  const exists = pages.some(
    (page) => page.label.toLowerCase() === trimmed.toLowerCase(),
  );
  if (trimmed && !exists) {
    groups.push({
      value: "New",
      items: [
        {
          value: "create",
          label: trimmed,
          detail: "Company / Planning",
          kind: "create",
        },
      ],
    });
  }
  return groups;
}

export default function Command09() {
  const [query, setQuery] = React.useState("");
  const [link, setLink] = React.useState<Link | null>(null);

  function apply(target: Target) {
    setLink({
      label: target.kind === "url" ? target.label.replace(/^https?:\/\//i, "") : target.label,
      href: target.kind === "url" ? target.label : `/wiki/${target.value}`,
      external: target.kind === "url",
    });
    setQuery("");
  }

  return (
    <section
      aria-labelledby="command-09-title"
      className="flex w-full max-w-sm flex-col gap-3 rounded-xl border border-border bg-card p-3 text-card-foreground"
    >
      <div className="flex flex-col gap-1 px-1">
        <h3 id="command-09-title" className="text-sm font-medium">
          Add link
        </h3>
        <p className="text-sm text-pretty text-muted-foreground">
          Before planning starts, review the{" "}
          {link ? (
            <a
              href={link.href}
              onClick={(event) => event.preventDefault()}
              className="font-medium text-foreground underline decoration-primary/60 underline-offset-2 hover:decoration-primary"
              title={link.label}
            >
              quarterly targets
            </a>
          ) : (
            <mark className="rounded-xs bg-primary/15 px-0.5 text-foreground">
              quarterly targets
            </mark>
          )}{" "}
          with your team.
        </p>
      </div>

      <Command
        items={buildGroups(query)}
        value={query}
        onValueChange={(next, details) => {
          if (details.reason === "item-press") return;
          setQuery(next);
        }}
        filter={(item, value) => {
          const target = item as Target;
          if (target.kind !== "page") return true;
          const needle = value.trim().toLowerCase();
          return `${target.label} ${target.detail}`.toLowerCase().includes(needle);
        }}
        className="rounded-lg! border border-border bg-background"
      >
        <CommandInput
          placeholder="Search pages or paste a URL"
          aria-label="Link to a page or URL"
        />
        <CommandList className="max-h-56">
          {(group: Group) => (
            <CommandGroup key={group.value} heading={group.value} items={group.items}>
              {(target: Target) => (
                <CommandItem
                  key={target.value}
                  value={target}
                  onClick={() => apply(target)}
                >
                  {target.kind === "url" ? (
                    <GlobeIcon aria-hidden="true" className="text-muted-foreground" />
                  ) : target.kind === "create" ? (
                    <FilePlusIcon aria-hidden="true" className="text-muted-foreground" />
                  ) : (
                    <FileTextIcon aria-hidden="true" className="text-muted-foreground" />
                  )}
                  <span className="flex min-w-0 flex-col">
                    <span className="truncate">
                      {target.kind === "create" ? (
                        <>
                          Create page{" "}
                          <span className="font-medium">“{target.label}”</span>
                        </>
                      ) : (
                        target.label
                      )}
                    </span>
                    <span className="truncate text-xs text-muted-foreground">
                      {target.kind === "create" ? `in ${target.detail}` : target.detail}
                    </span>
                  </span>
                </CommandItem>
              )}
            </CommandGroup>
          )}
        </CommandList>
        <CommandEmpty>No page matches. Paste a full URL instead.</CommandEmpty>
      </Command>

      <div className="flex min-h-8 items-center justify-between gap-2 px-1">
        <p
          aria-live="polite"
          className="min-w-0 truncate text-xs text-muted-foreground"
        >
          {link ? (
            <>
              Linked to{" "}
              <span className="text-foreground">
                {link.external ? link.label : `“${link.label}”`}
              </span>
            </>
          ) : (
            "Pick a page to link the highlighted text."
          )}
        </p>
        {link && (
          <Button variant="ghost" size="sm" onClick={() => setLink(null)}>
            <Link2OffIcon aria-hidden="true" />
            Unlink
          </Button>
        )}
      </div>
    </section>
  );
}

TSX
"use client";

import * as React from "react";
import { MessageSquareTextIcon, SendIcon, SlashIcon } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Kbd } from "@/components/ui/kbd";
import { Textarea } from "@/components/ui/textarea";

type Reply = { value: string; label: string; body: string };
type Topic = { value: string; items: Reply[] };

const customer = { name: "Rosa", order: "40318" };

const topics: Topic[] = [
  {
    value: "Billing",
    items: [
      {
        value: "refund",
        label: "Refund issued",
        body: `Hi ${customer.name}, I've issued a full refund for order no. ${customer.order}. It usually reaches your card within 5–10 business days.`,
      },
      {
        value: "invoice",
        label: "Resend invoice",
        body: `Hi ${customer.name}, I've resent the invoice for order no. ${customer.order} to the email on file. Let me know if it doesn't arrive in the next few minutes.`,
      },
    ],
  },
  {
    value: "Shipping",
    items: [
      {
        value: "tracking",
        label: "Share tracking link",
        body: `Your parcel for order no. ${customer.order} is on its way. You can follow it here: track.example.com/${customer.order}`,
      },
      {
        value: "delay",
        label: "Carrier delay apology",
        body: "Sorry for the wait. The carrier has flagged a regional delay, and we'll cover express shipping on your next order.",
      },
    ],
  },
  {
    value: "Account",
    items: [
      {
        value: "password",
        label: "Password reset steps",
        body: "You can reset your password from Settings → Security → Reset password. The link in the email stays valid for 30 minutes.",
      },
    ],
  },
];

export default function Command10() {
  const [draft, setDraft] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [sent, setSent] = React.useState<{ id: number; text: string }[]>([]);
  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
  const searchRef = React.useRef<HTMLInputElement>(null);
  const caretRef = React.useRef(0);

  React.useEffect(() => {
    if (open) searchRef.current?.focus();
  }, [open]);

  function focusComposer(position: number) {
    requestAnimationFrame(() => {
      const textarea = textareaRef.current;
      if (!textarea) return;
      textarea.focus();
      textarea.setSelectionRange(position, position);
    });
  }

  function openReplies() {
    caretRef.current = textareaRef.current?.selectionStart ?? draft.length;
    setQuery("");
    setOpen(true);
  }

  function closeReplies() {
    setOpen(false);
    focusComposer(caretRef.current);
  }

  function insert(reply: Reply) {
    const at = caretRef.current;
    const next = draft.slice(0, at) + reply.body + draft.slice(at);
    setDraft(next);
    setOpen(false);
    focusComposer(at + reply.body.length);
  }

  function send() {
    if (!draft.trim()) return;
    setSent((current) => [
      ...current,
      { id: current.length + 1, text: draft.trim() },
    ]);
    setDraft("");
  }

  return (
    <div className="flex w-full max-w-md flex-col rounded-xl border border-border bg-card text-card-foreground">
      <div className="flex items-center gap-3 border-b border-border p-3">
        <Avatar>
          <AvatarFallback>RG</AvatarFallback>
        </Avatar>
        <div className="min-w-0">
          <p className="truncate text-sm font-medium">Rosa Gallo</p>
          <p className="truncate text-xs text-muted-foreground">
            Order no. {customer.order} · Double charge on checkout
          </p>
        </div>
      </div>

      <div className="flex flex-col gap-2 p-3">
        <p className="max-w-[85%] rounded-lg bg-muted px-3 py-2 text-sm">
          I was charged twice for my last order. Can you help?
        </p>
        {sent.map((message) => (
          <p
            key={message.id}
            className="ml-auto max-w-[85%] rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground"
          >
            {message.text}
          </p>
        ))}
      </div>

      <div className="flex flex-col gap-2 border-t border-border p-3">
        {open && (
          <Command
            items={topics}
            value={query}
            onValueChange={(next, details) => {
              if (details.reason === "item-press") return;
              setQuery(next);
            }}
            className="rounded-lg! border border-border shadow-sm"
          >
            <CommandInput
              ref={searchRef}
              placeholder="Search saved replies"
              aria-label="Search saved replies"
              onKeyDown={(event) => {
                if (
                  event.key === "Escape" ||
                  (event.key === "Backspace" && query === "")
                ) {
                  event.preventDefault();
                  closeReplies();
                }
              }}
            />
            <CommandList className="max-h-48">
              {(topic: Topic) => (
                <CommandGroup
                  key={topic.value}
                  heading={topic.value}
                  items={topic.items}
                >
                  {(reply: Reply) => (
                    <CommandItem
                      key={reply.value}
                      value={reply}
                      onClick={() => insert(reply)}
                      className="items-start"
                    >
                      <MessageSquareTextIcon
                        className="mt-0.5 text-muted-foreground"
                        aria-hidden="true"
                      />
                      <span className="flex min-w-0 flex-col">
                        <span>{reply.label}</span>
                        <span className="line-clamp-1 text-xs text-muted-foreground">
                          {reply.body}
                        </span>
                      </span>
                    </CommandItem>
                  )}
                </CommandGroup>
              )}
            </CommandList>
            <CommandEmpty>No saved reply matches. Write it by hand.</CommandEmpty>
          </Command>
        )}

        <label htmlFor="command-10-reply" className="sr-only">
          Reply to Rosa
        </label>
        <Textarea
          id="command-10-reply"
          ref={textareaRef}
          value={draft}
          onChange={(event) => setDraft(event.target.value)}
          onKeyDown={(event) => {
            const at = event.currentTarget.selectionStart;
            const before = draft.slice(0, at);
            if (event.key === "/" && (before === "" || /\s$/.test(before))) {
              event.preventDefault();
              openReplies();
            }
            if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
              event.preventDefault();
              send();
            }
          }}
          placeholder="Write a reply. Type / for saved replies"
          className="min-h-20 resize-none"
        />
        <div className="flex items-center justify-between gap-2">
          <Button
            variant="ghost"
            size="sm"
            aria-expanded={open}
            onClick={() => (open ? closeReplies() : openReplies())}
          >
            <SlashIcon aria-hidden="true" />
            Saved replies
          </Button>
          <div className="flex items-center gap-2">
            <Kbd className="hidden sm:inline-flex">⌘ Enter</Kbd>
            <Button size="sm" onClick={send} disabled={!draft.trim()}>
              <SendIcon aria-hidden="true" />
              Send
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}