51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { Search, X } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface SearchBarProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function SearchBar({
|
|
value,
|
|
onChange,
|
|
placeholder = 'Search posts...',
|
|
className = ''
|
|
}: SearchBarProps) {
|
|
const handleClear = () => {
|
|
onChange('');
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className={`relative ${className}`}
|
|
>
|
|
<div className="relative">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="w-full pl-12 pr-12 py-3 bg-background/50 border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all"
|
|
/>
|
|
{value && (
|
|
<button
|
|
onClick={handleClear}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label="Clear search"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|