Command palette

"use client"

import * as React from "react"
import { Flag, GitBranch, MessageSquare, Plus, Settings, Table2 } from "lucide-react"
import { CommandPalette, CommandTrigger, matchEveryWord, type PaletteGroup } from "@/components/command-palette"

const recentThreads = [
  { id: "t1", label: "Add a region column to orders", detail: "Storefront · staging" },
  { id: "t2", label: "Why is checkout slow on Staging?", detail: "Storefront · staging" },
  { id: "t3", label: "Clean up stale feature flags", detail: "Storefront · Production" },
]

export default function Example() {
  const [open, setOpen] = React.useState(false)
  const [query, setQuery] = React.useState("")

  const groups: PaletteGroup[] = [
    {
      heading: "Actions",
      items: [
        { id: "new", label: "New thread", Icon: Plus, shortcut: "mod+shift+o", onSelect: () => {} },
        { id: "settings", label: "Open settings", Icon: Settings, onSelect: () => {} },
        { id: "deploy", label: "Promote Staging to Production", Icon: GitBranch, locked: "Only owners can promote to Production", onSelect: () => {} },
      ],
    },
    {
      heading: "Places",
      items: [
        { id: "flags", label: "Feature flags", Icon: Flag, keywords: ["toggles"], onSelect: () => {} },
        { id: "tables", label: "Tables", Icon: Table2, keywords: ["schema", "database"], onSelect: () => {} },
      ],
    },
    {
      // A real app fetches these from its search service as the query changes; here they're filtered locally.
      heading: "Threads",
      remote: true,
      items: query ? recentThreads.filter((t) => t.label.toLowerCase().includes(query.toLowerCase())).map((t) => ({ ...t, Icon: MessageSquare, onSelect: () => {} })) : [],
    },
  ]

  return (
    <div className="max-w-64">
      <CommandTrigger onClick={() => setOpen(true)} />
      {/* matchEveryWord: every word typed must start a word of the item, in any order ("flags feature"). */}
      <CommandPalette open={open} onOpenChange={setOpen} groups={groups} onQueryChange={setQuery} filter={matchEveryWord} />
    </div>
  )
}