40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { SearchIcon } from 'lucide-react'
|
|
import { useId } from 'react'
|
|
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
type Props = {
|
|
value: string
|
|
onChange: (value: string) => void
|
|
placeholder?: string
|
|
className?: string
|
|
}
|
|
|
|
const BarraBusqueda: React.FC<Props> = ({
|
|
value,
|
|
onChange,
|
|
placeholder = 'Buscar…',
|
|
className,
|
|
}) => {
|
|
const id = useId()
|
|
|
|
return (
|
|
<div className={['relative', className].filter(Boolean).join(' ')}>
|
|
<div className="text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50">
|
|
<SearchIcon className="size-4" />
|
|
<span className="sr-only">Buscar</span>
|
|
</div>
|
|
<Input
|
|
id={id}
|
|
type="search"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="peer px-9 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BarraBusqueda
|