"use client" import * as React from "react" import { motion, MotionConfig } from "framer-motion" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" const transition = { type: "spring", bounce: 0.1, duration: 0.2, } interface SearchToolbarProps { placeholder?: string onSearch?: (value: string) => void leftIcon: React.ReactNode searchIcon: React.ReactNode backIcon: React.ReactNode } export function SearchToolbar({ placeholder = "Search...", onSearch, leftIcon, searchIcon, backIcon, }: SearchToolbarProps) { const [isOpen, setIsOpen] = React.useState(false) const containerRef = React.useRef(null) React.useEffect(() => { function handleClickOutside(event: MouseEvent) { if (containerRef.current && !containerRef.current.contains(event.target as Node)) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) return (

{!isOpen ? (

) : (

onSearch?.(e.target.value)} />

)}

) }