20 lines
846 B
TypeScript
20 lines
846 B
TypeScript
interface SearchBarProps {
|
|
searchQuery: string
|
|
onSearchChange: (value: string) => void
|
|
}
|
|
|
|
export function SearchBar({ searchQuery, onSearchChange }: SearchBarProps) {
|
|
return (
|
|
<div className="flex-1 flex items-center border border-slate-700 bg-zinc-900 transition-all focus-within:border-[var(--neon-cyan)] focus-within:shadow-[0_0_6px_rgba(0,255,255,0.4),inset_0_0_6px_rgba(0,255,255,0.05)]">
|
|
<span className="pl-4 pr-2 font-mono text-lg" style={{ color: 'var(--neon-cyan)' }}>></span>
|
|
<input
|
|
type="text"
|
|
placeholder="SEARCH POSTS..."
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
className="flex-1 bg-transparent font-mono text-zinc-100 dark:text-zinc-100 px-2 py-3 focus:outline-none placeholder:text-zinc-600 uppercase text-sm"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|