style: add focus color

This commit is contained in:
RiO
2024-12-25 06:32:37 +05:30
parent ebe88e4292
commit b38d7a4773

View File

@@ -9,14 +9,14 @@ interface SearchBarProps {
export function SearchBar({ value, onChange }: SearchBarProps) { export function SearchBar({ value, onChange }: SearchBarProps) {
return ( return (
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" /> <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 transition-all" />
<input <input
type="text" type="text"
value={value} value={value}
onChange={onChange} onChange={onChange}
placeholder="Search tools..." placeholder="Search tools..."
className="w-full pl-10 pr-4 py-2 bg-white/80 backdrop-blur-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-cornflower-blue focus:border-transparent outline-none" className="w-full pl-12 pr-6 py-3 bg-white/80 backdrop-blur-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-cornflower-blue focus:border-cornflower-blue outline-none transition-all duration-300 ease-in-out hover:border-gray-300 hover:bg-white/90"
/> />
</div> </div>
); );
} }