39 lines
879 B
TypeScript
39 lines
879 B
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Search } from 'lucide-react'
|
|
import { Input } from '@/components/ui/input'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface SettingsSearchProps {
|
|
onSearch: (query: string) => void
|
|
placeholder?: string
|
|
className?: string
|
|
}
|
|
|
|
export function SettingsSearch({
|
|
onSearch,
|
|
placeholder = 'Search settings...',
|
|
className
|
|
}: SettingsSearchProps) {
|
|
const [query, setQuery] = useState('')
|
|
|
|
const handleChange = (value: string) => {
|
|
setQuery(value)
|
|
onSearch(value)
|
|
}
|
|
|
|
return (
|
|
<div className={cn('relative', className)}>
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|