Command Palette

"use client";

import {
  FilePlus2,
  Folder,
  FolderPlus,
  House,
  Keyboard,
  Search,
  Settings2,
  UsersRound,
} from "lucide-react";
import { useState } from "react";
import {
  type MorphicCommandItem,
  MorphicCommandPalette,
  MorphicCommandPaletteContent,
  MorphicCommandPaletteTrigger,
} from "@/components/premium/command-palette";

const commands: MorphicCommandItem[] = [
  {
    id: "home",
    label: "Home",
    group: "Navigation",
    icon: House,
    keywords: ["dashboard", "overview"],
  },
  { id: "projects", label: "Projects", group: "Navigation", icon: Folder },
  {
    id: "team",
    label: "Team",
    group: "Navigation",
    icon: UsersRound,
    keywords: ["members", "people"],
  },
  {
    id: "settings",
    label: "Settings",
    group: "Navigation",
    icon: Settings2,
    keywords: ["preferences", "account"],
  },
  {
    id: "new-document",
    label: "New document",
    group: "Actions",
    icon: FilePlus2,
    keywords: ["create", "page", "write"],
  },
  {
    id: "new-project",
    label: "New project",
    group: "Actions",
    icon: FolderPlus,
    keywords: ["create", "folder"],
  },
  {
    id: "shortcuts",
    label: "Keyboard shortcuts",
    group: "Actions",
    icon: Keyboard,
    keywords: ["help", "keys"],
  },
];

export function MorphicCommandPalettePreview() {
  const [selected, setSelected] = useState("");

  return (
    <div className="flex min-h-80 w-full flex-col items-center justify-center gap-3 p-6">
      <MorphicCommandPalette
        items={commands}
        shortcut="j"
        onSelect={(item) => setSelected(item.label)}
      >
        <MorphicCommandPaletteTrigger className="h-9">
          <Search aria-hidden className="size-4 text-muted-foreground" />
          <span>Open command palette</span>
          <kbd className="ml-3 text-xs text-muted-foreground">⌘ / Ctrl J</kbd>
        </MorphicCommandPaletteTrigger>
        <MorphicCommandPaletteContent />
      </MorphicCommandPalette>
      <output className="min-h-4 text-xs text-muted-foreground">
        {selected ? `Selected: ${selected}` : ""}
      </output>
    </div>
  );
}