/** * Spectrum UI — CommandPalette * * Dependencies: framer-motion, lucide-react, next-themes, @/lib/utils * * @example * setIsOpen(false)} /> */ "use client" import React, { useState, useEffect, useRef, useCallback, useMemo } from "react" import { useRouter } from "next/navigation" import { useTheme } from "next-themes" import { motion, AnimatePresence, useReducedMotion } from "framer-motion" import { Search, Home, Code, HelpCircle, Laptop, Sun, Moon, Copy, Github, CornerDownLeft } from "lucide-react" import { cn } from "@/lib/utils" // ─── Types ─────────────────────────────────────────────────────────────────── export interface CommandItem { id: string title: string description: string category: "Navigation" | "Theme" | "Repository" shortcut?: string[] icon: React.ReactNode action: () => void } export interface CommandPaletteProps { isOpen: boolean onClose: () => void className?: string } // ─── Animation Springs ──────────────────────────────────────────────────────── const SPRING_FLUID = { type: "spring", stiffness: 300, damping: 30, } as const const SPRING_ENTRANCE = { type: "spring", stiffness: 260, damping: 20, } as const // ─── Component ─────────────────────────────────────────────────────────────── export function CommandPalette({ isOpen, onClose, className }: CommandPaletteProps) { const router = useRouter() const { theme, setTheme } = useTheme() const shouldReduceMotion = useReducedMotion() const [query, setQuery] = useState("") const [activeIndex, setActiveIndex] = useState(0) const [isCopied, setIsCopied] = useState(false) const inputRef = useRef(null) const itemsContainerRef = useRef(null) // Auto-focus input when opened useEffect(() => { if (isOpen) { setTimeout(() => { inputRef.current?.focus() }, 50) setQuery("") setActiveIndex(0) } }, [isOpen]) // Copy CLI command action const handleCopyCommand = useCallback(() => { navigator.clipboard.writeText("npx -y @spectrumui/mcp").then(() => { setIsCopied(true) setTimeout(() => setIsCopied(false), 2000) }) }, []) // Defined Command List const commandsList = useMemo(() => { return [ { id: "nav-home", title: "Go to Homepage", description: "Navigate back to the landing page", category: "Navigation", shortcut: ["G", "H"], icon: , action: () => { router.push("/") onClose() }, }, { id: "nav-components", title: "Explore Components", description: "Browse React & Next.js copy-paste components", category: "Navigation", shortcut: ["G", "C"], icon:

,
        action: () => {
          router.push("/docs")
          onClose()
        },
      },
      {
        id: "nav-faqs",
        title: "Frequently Asked Questions",
        description: "Answers to common integration questions",
        category: "Navigation",
        shortcut: ["G", "F"],
        icon: ,
        action: () => {
          router.push("/faqs")
          onClose()
        },
      },
      {
        id: "theme-light",
        title: "Set Theme to Light",
        description: "Switch to light mode interface appearance",
        category: "Theme",
        shortcut: ["T", "L"],
        icon: ,
        action: () => {
          setTheme("light")
          onClose()
        },
      },
      {
        id: "theme-dark",
        title: "Set Theme to Dark",
        description: "Switch to dark mode interface appearance",
        category: "Theme",
        shortcut: ["T", "D"],
        icon: ,
        action: () => {
          setTheme("dark")
          onClose()
        },
      },
      {
        id: "theme-system",
        title: "Set Theme to System",
        description: "Match the system device theme",
        category: "Theme",
        shortcut: ["T", "S"],
        icon: ,
        action: () => {
          setTheme("system")
          onClose()
        },
      },
      {
        id: "cmd-copy",
        title: isCopied ? "CLI Command Copied!" : "Copy CLI Install Command",
        description: "Copy npx spectrum-ui installer to clipboard",
        category: "Repository",
        shortcut: ["C", "C"],
        icon: ,
        action: () => {
          handleCopyCommand()
        },
      },
      {
        id: "cmd-github",
        title: "View GitHub Repository",
        description: "Open the open-source spectrum-ui repo on GitHub",
        category: "Repository",
        shortcut: ["G", "R"],
        icon: ,
        action: () => {
          window.open("https://github.com/arihantcodes/spectrum-ui", "_blank")
          onClose()
        },
      },
    ]
  }, [router, setTheme, onClose, isCopied, handleCopyCommand])

  // Filter commands by search query
  const filteredCommands = useMemo(() => {
    return commandsList.filter((item) => {
      const matchText = (item.title + " " + item.description + " " + item.category).toLowerCase()
      return matchText.includes(query.toLowerCase())
    })
  }, [commandsList, query])

  // Reset active index when query changes
  useEffect(() => {
    setActiveIndex(0)
  }, [query])

  // Keyboard navigation logic
  useEffect(() => {
    if (!isOpen) return

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.preventDefault()
        onClose()
      } else if (e.key === "ArrowDown") {
        e.preventDefault()
        setActiveIndex((prev) => (filteredCommands.length > 0 ? (prev + 1) % filteredCommands.length : 0))
      } else if (e.key === "ArrowUp") {
        e.preventDefault()
        setActiveIndex((prev) => (filteredCommands.length > 0 ? (prev - 1 + filteredCommands.length) % filteredCommands.length : 0))
      } else if (e.key === "Enter") {
        e.preventDefault()
        const target = filteredCommands[activeIndex]
        if (target) {
          target.action()
        }
      }
    }

    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [isOpen, onClose, filteredCommands, activeIndex])

  // Scroll active item into view
  useEffect(() => {
    const activeEl = itemsContainerRef.current?.querySelector(`[data-index="${activeIndex}"]`)
    if (activeEl) {
      activeEl.scrollIntoView({ block: "nearest" })
    }
  }, [activeIndex])

  // Grouped filtered commands
  const categories = useMemo(() => {
    const groups: { [key: string]: typeof filteredCommands } = {}
    filteredCommands.forEach((cmd) => {
      if (!groups[cmd.category]) {
        groups[cmd.category] = []
      }
      groups[cmd.category].push(cmd)
    })
    return groups
  }, [filteredCommands])

  // Get index mapping in the grouped list to keep index alignment consistent
  const getFlatIndex = (cmdId: string) => {
    return filteredCommands.findIndex((c) => c.id === cmdId)
  }

  return (
    
      {isOpen && (
        
          
          {/* Backdrop Blur Overlay */}
          

          {/* Palette Dialog Box */}
          
            {/* Search Input Bar */}
            
              
               setQuery(e.target.value)}
                className="flex-1 bg-transparent border-0 outline-none text-sm text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-400 dark:placeholder:text-neutral-600 focus:ring-0 focus:outline-none"
              />
              
                ESC
              
            

            {/* Commands List Container */}
            
              {filteredCommands.length === 0 ? (
                /* Empty state */
                
                  No commands found matching "{query}"
                
              ) : (
                /* Categorized items mapping */
                Object.entries(categories).map(([category, items]) => (
                  
                    
                      {category}
                    
                    
                      {items.map((item) => {
                        const flatIdx = getFlatIndex(item.id)
                        const isActive = flatIdx === activeIndex

                        return (
                           {
                              item.action()
                            }}
                            onMouseEnter={() => setActiveIndex(flatIdx)}
                            className={cn(
                              "relative flex items-center justify-between px-3 py-2.5 rounded-xl cursor-pointer select-none transition-colors group z-10",
                              isActive ? "text-neutral-900 dark:text-white" : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
                            )}
                          >
                            {/* Layout animation active indicator card */}
                            {isActive && (
                              
                            )}

                            {/* Info Left */}
                            
                              
                                {item.icon}
                              
                              
                                
                                  {item.title}
                                
                                
                                  {item.description}
                                
                              
                            

                            {/* Shortcut Badges Right */}
                            {item.shortcut && (
                              
                                {item.shortcut.map((key, kIdx) => (
                                  
                                    {key}
                                  
                                ))}
                                {isActive && (
                                  
                                )}
                              
                            )}

                          
                        )
                      })}
                    
                  
                ))
              )}
            

            {/* Bottom Status bar */}
            
              
                Use arrows
                ↑↓
                and
                Enter
              
              Spectrum Palette
            

          
        
      )}
    
  )
}

Command Palette

Installation