Glass Command Palette

1"use client"
2 
3import * as React from "react"
4import { Command, Search, File, Settings, User, Home, Layers, Moon, Sun, ArrowRight } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7interface CommandItem {
8  id: string
9  label: string
10  description?: string
11  icon?: React.ReactNode
12  shortcut?: string
13  action?: () => void
14  href?: string
15}
16 
17interface CommandGroup {
18  label: string
19  items: CommandItem[]
20}
21 
22type CommandPalettePosition = "center" | "top" | "bottom" | "left" | "right"
23 
24interface GlassCommandPaletteProps {
25  open?: boolean
26  onOpenChange?: (open: boolean) => void
27  groups?: CommandGroup[]
28  placeholder?: string
29  position?: CommandPalettePosition
30}
31 
32const defaultGroups: CommandGroup[] = [
33  {
34    label: "Navigation",
35    items: [
36      { id: "home", label: "Home", icon: <Home className="w-4 h-4" />, shortcut: "G H", href: "/" },
37      { id: "docs", label: "Documentation", icon: <File className="w-4 h-4" />, shortcut: "G D", href: "/docs" },
38      {
39        id: "components",
40        label: "Components",
41        icon: <Layers className="w-4 h-4" />,
42        shortcut: "G C",
43        href: "/docs/components/cards",
44      },
45    ],
46  },
47  {
48    label: "Actions",
49    items: [
50      { id: "settings", label: "Settings", icon: <Settings className="w-4 h-4" />, shortcut: "G S" },
51      { id: "profile", label: "Profile", icon: <User className="w-4 h-4" />, shortcut: "G P" },
52    ],
53  },
54  {
55    label: "Theme",
56    items: [
57      { id: "light", label: "Light Mode", icon: <Sun className="w-4 h-4" /> },
58      { id: "dark", label: "Dark Mode", icon: <Moon className="w-4 h-4" /> },
59    ],
60  },
61]
62 
63const positionStyles: Record<CommandPalettePosition, { container: string; animation: string; wrapper: string }> = {
64  center: {
65    container: "items-start justify-center pt-[20vh]",
66    animation: "animate-in fade-in slide-in-from-top-4 duration-200",
67    wrapper: "w-full max-w-xl mx-4",
68  },
69  top: {
70    container: "items-start justify-center pt-4",
71    animation: "animate-in fade-in slide-in-from-top-full duration-300",
72    wrapper: "w-full max-w-2xl mx-4",
73  },
74  bottom: {
75    container: "items-end justify-center pb-4",
76    animation: "animate-in fade-in slide-in-from-bottom-full duration-300",
77    wrapper: "w-full max-w-2xl mx-4",
78  },
79  left: {
80    container: "items-center justify-start",
81    animation: "animate-in fade-in slide-in-from-left-full duration-300",
82    wrapper: "w-full max-w-md h-[80vh] flex flex-col pl-4 pr-4 sm:pr-0",
83  },
84  right: {
85// … truncated