Command Palette

<link rel="stylesheet" href="command-palette.css" />
<script src="command-palette.js" defer></script>

<button type="button" data-command-palette-open>
  Tìm kiếm… <kbd data-command-palette-hotkey>⌘K</kbd>
</button>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const palette = CommandPalette.create({
      placeholder: "Gõ lệnh hoặc tìm kiếm…",
      items: [
        { id: "home", title: "Trang chủ", section: "Điều hướng", href: "/" },
        { id: "billing", title: "Thanh toán", section: "Điều hướng", keywords: ["hoá đơn", "gói"], href: "/billing" },
        { id: "theme", title: "Đổi giao diện", section: "Thao tác", icon: "🌓", shortcut: ["T"], perform: toggleTheme },
      ],
    });
  });
</script>

texts: {
  label: "Bảng lệnh",
  inputLabel: "Tìm lệnh",
  listLabel: "Lệnh",
  recent: "Gần đây",
  close: "Đóng",
  empty: (query) => `Không có kết quả cho “${query.trim()}”`,
  count: (count) => `${count} kết quả`,
  hintMove: "để di chuyển",
  hintRun: "để chạy",
  hintClose: "để đóng",
}

{
  id: "billing",            // duy nhất và cố định: mục "gần đây" nhớ theo id
  title: "Thanh toán",      // hiển thị và được tìm
  section: "Điều hướng",    // tiêu đề nhóm (tuỳ chọn)
  keywords: ["hoá đơn"],    // cũng được tìm nhưng không hiển thị (tuỳ chọn)
  shortcut: ["G", "B"],     // hiện dạng phím <kbd> — chỉ là gợi ý, bạn tự gắn phím (tuỳ chọn)
  icon: "💳",               // chữ hoặc DOM node; trong React là React node bất kỳ (tuỳ chọn)
  href: "/billing",         // mở khi không có perform (tuỳ chọn)
  perform: () => {},        // chạy khi được chọn (tuỳ chọn)
}

import { useState } from "react";
import { CommandPalette } from "./CommandPalette";

const items = [
  { id: "home", title: "Trang chủ", section: "Điều hướng", href: "/" },
  { id: "theme", title: "Đổi giao diện", section: "Thao tác", icon: <MoonIcon />, perform: toggleTheme },
];

export function Search() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>Tìm kiếm… ⌘K</button>
      <CommandPalette items={items} open={open} onOpenChange={setOpen} />
    </>
  );
}