Command Palette Demo

1"use client"
2 
3import React, { useState, useEffect, useCallback } from "react"
4import { CommandPalette } from "./command-palette"
5import { Button } from "@/components/ui/button"
6 
7export default function CommandPaletteDemo() {
8  const [isOpen, setIsOpen] = useState(false)
9 
10  const handleClose = useCallback(() => {
11    setIsOpen(false)
12  }, [])
13 
14  // Listen for global command/control key trigger
15  useEffect(() => {
16    const handleKeyDown = (e: KeyboardEvent) => {
17      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
18        e.preventDefault()
19        setIsOpen((open) => !open)
20      }
21    }
22    window.addEventListener("keydown", handleKeyDown)
23    return () => window.removeEventListener("keydown", handleKeyDown)
24  }, [])
25 
26  return (
27    <div className="flex flex-col items-center justify-center gap-4 py-8 text-center select-none">
28      <p className="text-sm text-neutral-500 dark:text-neutral-400">
29        Press <kbd className="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 px-1.5 py-0.5 rounded text-xs font-mono font-medium text-neutral-800 dark:text-neutral-200">⌘K</kbd> or <kbd className="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 px-1.5 py-0.5 rounded text-xs font-mono font-medium text-neutral-800 dark:text-neutral-200">Ctrl+K</kbd> to open the palette
30      </p>
31      
32      <Button
33        variant="outline"
34        onClick={() => setIsOpen(true)}
35        className="rounded-xl px-5 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 font-medium text-sm transition-colors cursor-pointer"
36      >
37        Open Command Palette
38      </Button>
39 
40      <CommandPalette isOpen={isOpen} onClose={handleClose} />
41    </div>
42  )
43}