Command

"use client";

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut,
} from "@dashboardpack/core/components/ui/command";
import { useState } from "react";

export default function CommandExample() {
  const [action, setAction] = useState(
    "Use arrow keys and Enter to select an action.",
  );
  return (
    <div className="w-full max-w-md space-y-3">
      <Command className="rounded-xl border shadow-sm">
        <CommandInput placeholder="Search actions…" />
        <CommandList>
          <CommandEmpty>No actions found.</CommandEmpty>
          <CommandGroup heading="Workspace">
            <CommandItem onSelect={() => setAction("Create project")}>
              Create project<CommandShortcut>⌘N</CommandShortcut>
            </CommandItem>
            <CommandItem onSelect={() => setAction("Invite member")}>
              Invite member
            </CommandItem>
          </CommandGroup>
          <CommandSeparator role="presentation" aria-hidden />
          <CommandGroup heading="Settings">
            <CommandItem onSelect={() => setAction("Open preferences")}>
              Preferences
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
      <p className="text-xs text-muted-foreground" role="status">
        {action}
      </p>
    </div>
  );
}