Shadcn Command for React

CommandRoot
├── CommandClearTrigger
├── CommandContent
├── CommandControl
├── CommandInput
├── CommandItem
│   ├── CommandGroup
│   │   └── CommandGroupLabel
│   ├── CommandItemIndicator
│   └── CommandItemText
├── CommandLabel
├── CommandList
├── CommandPositioner
└── CommandTrigger

import { useListCollection } from "@ark-ui/react/collection";
import { useFilter } from "@ark-ui/react/locale";
import {
  CalculatorIcon,
  CalendarIcon,
  CreditCardIcon,
  SettingsIcon,
  SmileIcon,
  UserIcon,
} from "lucide-react";
import { Fragment } from "react";
import {
  Command,
  CommandContent,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

const initialItems = [
  {
    group: "Suggestions",
    icon: CalendarIcon,
    label: "Calendar",
    value: "calendar",
  },
  {
    group: "Suggestions",
    icon: SmileIcon,
    label: "Search Emoji",
    value: "emoji",
  },
  {
    disabled: true,
    group: "Suggestions",
    icon: CalculatorIcon,
    label: "Calculator",
    value: "calculator",
  },
  {
    group: "Settings",
    icon: UserIcon,
    label: "Profile",
    shortcut: "⌘P",
    value: "profile",
  },
  {
    group: "Settings",
    icon: CreditCardIcon,
    label: "Billing",
    shortcut: "⌘B",
    value: "billing",
  },
  {
    group: "Settings",
    icon: SettingsIcon,
    label: "Settings",
    shortcut: "⌘S",
    value: "settings",
  },
];

const CommandDemo = () => {
  const { contains } = useFilter({ sensitivity: "base" });
  const { collection, filter } = useListCollection({
    filter: contains,
    groupBy: (item) => item.group,
    initialItems,
  });

  const handleInputValueChange = (details: { inputValue: string }) => {
    filter(details.inputValue);
  };

  return (
    <Command
      className="max-w-sm rounded-lg border"
      collection={collection}
      onInputValueChange={handleInputValueChange}
    >
      <CommandInput placeholder="Type a command or search..." />
      <CommandContent>
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          {collection.group().map(([group, items], index) => (
            <Fragment key={group}>
              {index > 0 && <CommandSeparator />}
              <CommandGroup heading={group}>
                {items.map((item) => {
                  const Icon = item.icon;

                  return (
                    <CommandItem item={item} key={item.value}>
                      <Icon aria-hidden="true" />
                      <span>{item.label}</span>
                      {!!item.shortcut && (
                        <CommandShortcut>{item.shortcut}</CommandShortcut>
                      )}
                    </CommandItem>
                  );
                })}
              </CommandGroup>
            </Fragment>
          ))}
        </CommandList>
      </CommandContent>
    </Command>
  );
};