コマンドパレットCommandPaletteExperimental

"use client"

import { Button, CommandPalette, Kbd } from "@gunjo/ui"
import {
  IconCalculator as Calculator,
  IconCalendar as Calendar,
  IconCreditCard as CreditCard,
  IconFileText as FileText,
  IconMoodSmile as Smile,
  IconSearch as Search,
  IconSettings as Settings,
  IconUserCircle as UserRound,
} from "@tabler/icons-react"
import { useEffect, useMemo, useState } from "react"

export function CommandPaletteExample() {
  const [open, setOpen] = useState(false)

  useEffect(() => {
    const down = (event: KeyboardEvent) => {
      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
        event.preventDefault()
        setOpen((current) => !current)
      }
    }
    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  const groups = useMemo(
    () => [
      {
        heading: "移動",
        items: [
          {
            id: "search",
            label: "ドキュメントを検索",
            icon: <Search />,
            shortcut: "⌘K",
            action: () => setOpen(false),
          },
          {
            id: "files",
            label: "最近のファイル",
            icon: <FileText />,
            action: () => setOpen(false),
          },
        ],
      },
      {
        heading: "ツール",
        items: [
          {
            id: "calendar",
            label: "カレンダー",
            icon: <Calendar />,
            action: () => setOpen(false),
          },
          { id: "emoji", label: "絵文字を検索", icon: <Smile />, action: () => setOpen(false) },
          {
            id: "calculator",
            label: "計算機",
            icon: <Calculator />,
            action: () => setOpen(false),
          },
        ],
      },
      {
        heading: "設定",
        items: [
          {
            id: "profile",
            label: "プロフィール",
            icon: <UserRound />,
            shortcut: "⌘P",
            action: () => setOpen(false),
          },
          {
            id: "billing",
            label: "請求",
            icon: <CreditCard />,
            shortcut: "⌘B",
            action: () => setOpen(false),
          },
          {
            id: "settings",
            label: "環境設定",
            icon: <Settings />,
            shortcut: "⌘S",
            action: () => setOpen(false),
          },
        ],
      },
    ],
    []
  )

  return (
    <div className="flex flex-col items-center gap-3">
      <p className="text-sm text-muted-foreground">
        キーボードから開く場合は <Kbd>⌘K</Kbd>
      </p>
      <Button type="button" variant="outline" onClick={() => setOpen(true)}>
        コマンドパレットを開く
      </Button>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        dialogTitle="コマンドパレット"
        placeholder="コマンドまたはページを検索..."
        emptyMessage="一致するコマンドがありません。"
        clearLabel="検索をクリア"
        groups={groups}
      />
    </div>
  )
}