36 lines
1020 B
TypeScript
36 lines
1020 B
TypeScript
import { useRouter, useSearch } from '@tanstack/react-router'
|
|
import { useDebouncedCallback } from 'use-debounce'
|
|
|
|
interface SearchProps {
|
|
readonly className?: string
|
|
}
|
|
|
|
export function Search({ className = '' }: SearchProps) {
|
|
const search = useSearch({ strict: false })
|
|
const router = useRouter()
|
|
|
|
const handleSearch = useDebouncedCallback((term: string) => {
|
|
router.navigate({
|
|
to: '.',
|
|
search: (prev) => ({
|
|
...prev,
|
|
page: 1,
|
|
query: term || undefined,
|
|
}),
|
|
replace: true,
|
|
})
|
|
}, 300)
|
|
|
|
return (
|
|
<input
|
|
type="text"
|
|
placeholder="Search articles..."
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|
handleSearch(e.target.value)
|
|
}
|
|
defaultValue={(search as any)?.query || ''}
|
|
className={`w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 transition-colors ${className}`}
|
|
/>
|
|
)
|
|
}
|