Command

 1import { useState } from "react";
 2import { Command, type CommandGroup } from "@/components/wensity/command";
 3
 4export function CommandSearch() {
 5  const [lastSelected, setLastSelected] = useState<string | null>(null);
 6
 7  const groups: CommandGroup[] = [
 8    {
 9      items: [
10        { id: "invoices", label: "Invoices", description: "Billing history and receipts" },
11        { id: "customers", label: "Customers", description: "Manage customer accounts" },
12        { id: "settings", label: "Workspace settings", description: "Preferences and members" },
13        { id: "appearance", label: "Appearance", description: "Theme and layout options" },
14      ],
15    },
16  ];
17
18  return (
19    <Command
20      groups={groups}
21      placeholder="Type to filter..."
22      onSelect={(item) => setLastSelected(item.label)}
23    />
24  );
25}

 1import { Command, type CommandGroup } from "@/components/wensity/command";
 2
 3const groups: CommandGroup[] = [
 4  {
 5    heading: "Pages",
 6    items: [
 7      { id: "dashboard", label: "Dashboard" },
 8      { id: "customers", label: "Customers" },
 9      { id: "files", label: "Files" },
10    ],
11  },
12  {
13    heading: "Actions",
14    items: [
15      { id: "invite", label: "Invite teammate" },
16      { id: "export", label: "Export data" },
17    ],
18  },
19  {
20    heading: "Preferences",
21    items: [{ id: "settings-preferences", label: "Settings", shortcut: ["⌘", ","] }],
22  },
23];
24
25export function CommandGrouped() {
26  return <Command groups={groups} showHints={false} />;
27}

 1import { IconClock, IconFolder, IconSettings, IconUser } from "@tabler/icons-react";
 2import { Command, type CommandGroup } from "@/components/wensity/command";
 3
 4const groups: CommandGroup[] = [
 5  {
 6    heading: "Recent",
 7    items: [
 8      { id: "recent-invoices", label: "Invoices", icon: <IconClock /> },
 9      { id: "recent-jane", label: "Jane Cooper", icon: <IconClock /> },
10    ],
11  },
12  {
13    heading: "All commands",
14    items: [
15      { id: "customers", label: "Customers", icon: <IconUser /> },
16      { id: "files", label: "Files", icon: <IconFolder /> },
17      { id: "settings", label: "Settings", icon: <IconSettings /> },
18    ],
19  },
20];
21
22export function CommandRecent() {
23  return <Command groups={groups} placeholder="Search recent and all commands..." />;
24}

 1import { IconMoon, IconDeviceDesktop, IconPalette, IconSun } from "@tabler/icons-react";
 2import { Command, type CommandGroup } from "@/components/wensity/command";
 3
 4const groups: CommandGroup[] = [
 5  {
 6    items: [
 7      {
 8        id: "theme",
 9        label: "Change theme",
10        description: "Light, dark, or system",
11        icon: <IconPalette />,
12        pageTitle: "Theme",
13        items: [
14          {
15            items: [
16              { id: "theme-light", label: "Light", icon: <IconSun /> },
17              { id: "theme-dark", label: "Dark", icon: <IconMoon /> },
18              { id: "theme-system", label: "System", icon: <IconDeviceDesktop /> },
19            ],
20          },
21        ],
22      },
23    ],
24  },
25];
26
27export function CommandNested() {
28  return <Command groups={groups} placeholder="Search or open a submenu..." />;
29}

 1import { useState } from "react";
 2import {
 3  IconArrowRight,
 4  IconDeviceDesktop,
 5  IconFileText,
 6  IconFolder,
 7  IconMoon,
 8  IconPalette,
 9  IconPlus,
10  IconSearch,
11  IconSettings,
12  IconSun,
13  IconUser,
14} from "@tabler/icons-react";
15import { CommandDialog, type CommandGroup } from "@/components/wensity/command";
16
17const groups: CommandGroup[] = [
18  {
19    heading: "Recent",
20    items: [
21      { id: "customer-jane", label: "Jane Cooper", description: "Open customer profile", icon: <IconUser /> },
22      { id: "q2-report", label: "Q2 revenue report", description: "Edited 12 minutes ago", icon: <IconFileText /> },
23    ],
24  },
25  {
26    heading: "Navigate",
27    items: [
28      { id: "dashboard", label: "Dashboard", description: "Workspace overview", icon: <IconDeviceDesktop /> },
29      { id: "customers", label: "Customers", description: "Accounts, segments, and notes", icon: <IconUser /> },
30      { id: "files", label: "Files", description: "Contracts and shared assets", icon: <IconFolder /> },
31    ],
32  },
33  {
34    heading: "Actions",
35    items: [
36      { id: "new-file", label: "Create file", icon: <IconPlus />, shortcut: ["⌘", "N"] },
37      { id: "invite", label: "Invite teammate", icon: <IconArrowRight />, shortcut: ["⌘", "I"] },
38      { id: "search", label: "Search everywhere", icon: <IconSearch />, shortcut: ["⌘", "K"] },
39    ],
40  },
41  {
42    heading: "Preferences",
43    items: [
44      {
45        id: "theme",
46        label: "Theme",
47        description: "Light, dark, or system",
48        icon: <IconPalette />,
49        pageTitle: "Theme",
50        items: [
51          {
52            items: [
53              { id: "theme-light", label: "Light", icon: <IconSun /> },
54              { id: "theme-dark", label: "Dark", icon: <IconMoon /> },
55              { id: "theme-system", label: "System", icon: <IconDeviceDesktop /> },
56            ],
57          },
58        ],
59      },
60      { id: "settings", label: "Workspace settings", icon: <IconSettings />, shortcut: ["⌘", ","] },
61    ],
62  },
63];
64
65export function CommandInDialog() {
66  const [open, setOpen] = useState(false);
67
68  return (
69    <CommandDialog
70      open={open}
71      onOpenChange={setOpen}
72      groups={groups}
73      shortcut={{ key: "k", meta: true }}
74      trigger={
75        <button
76          type="button"
77          className="inline-flex h-9 items-center gap-2 rounded-lg border border-[var(--border)] px-3 text-[13px] text-[var(--muted-foreground)] transition-colors duration-100 ease-out hover:bg-[color-mix(in_srgb,var(--foreground)_4%,var(--background))] hover:text-[var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--foreground)_18%,transparent)]"
78        >
79          <IconSearch stroke={1.75} className="size-4" />
80          Search...
81        </button>
82      }
83    />
84  );
85}