Search Bar

npx shadcn@latest add https://ui.authmate.xyz/registry/search-bar.json

// 1. Install dependencies
npm install framer-motion lucide-react

// 2. Make sure you have these shadcn components installed:
npx shadcn@latest add input button badge

// 3. Copy the component code to components/ui/search-bar.tsx

// 4. Add global keyboard event listener to your root layout (optional for global shortcuts):
// In your app/layout.tsx or _app.tsx:
useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault()
      // Focus your search bar
      document.querySelector('[data-search-bar]')?.focus()
    }
  }
  
  document.addEventListener('keydown', handleKeyDown)
  return () => document.removeEventListener('keydown', handleKeyDown)
}, [])

// 5. Usage example:
import { SearchBar } from "@/components/ui/search-bar"
import { useState } from "react"

export default function MySearchComponent() {
  const [searchValue, setSearchValue] = useState("")
  
  const suggestions = [
    {
      id: "1",
      title: "Dashboard",
      description: "Go to dashboard",
      category: "Navigation"
    },
    {
      id: "2", 
      title: "Settings",
      description: "Open settings",
      category: "Configuration"
    }
  ]

  return (
    <div className="w-full max-w-md mx-auto">
      <SearchBar
        placeholder="Search or press Cmd+K..."
        value={searchValue}
        onChange={setSearchValue}
        suggestions={suggestions}
        onSearch={(query) => {
          console.log("Searching for:", query)
          // Perform your search logic here
        }}
        onSelect={(suggestion) => {
          console.log("Selected:", suggestion)
          // Handle suggestion selection
        }}
        shortcutKey="k" // Cmd+K or Ctrl+K to focus
        variant="default"
        showSuggestions={true}
      />
    </div>
  )
}