58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface SearchDropdownProps {
|
|
searchFocused: boolean;
|
|
searchQuery: string;
|
|
recentSearches: string[];
|
|
setSearchQuery: (query: string) => void;
|
|
}
|
|
|
|
export function SearchDropdown({
|
|
searchFocused,
|
|
searchQuery,
|
|
recentSearches,
|
|
setSearchQuery
|
|
}: SearchDropdownProps) {
|
|
if (!searchFocused) return null;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="absolute top-12 left-4 right-4 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"
|
|
>
|
|
<div className="p-3">
|
|
<h3 className="text-xs font-medium text-tertiary-300 mb-2">Recent Searches</h3>
|
|
<div className="space-y-1">
|
|
{recentSearches.map((search, index) => (
|
|
<motion.button
|
|
key={index}
|
|
whileHover={{ x: 4 }}
|
|
className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-gray-100 text-left"
|
|
onClick={() => setSearchQuery(search)}
|
|
>
|
|
<MagnifyingGlassIcon className="h-4 w-4 text-tertiary-300" />
|
|
<span className="text-sm text-gray-700">{search}</span>
|
|
</motion.button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{searchQuery && (
|
|
<div className="border-t border-gray-100 p-3">
|
|
<motion.button
|
|
whileHover={{ x: 4 }}
|
|
className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-gray-100"
|
|
>
|
|
<MagnifyingGlassIcon className="h-4 w-4 text-blue-500" />
|
|
<span className="text-sm text-blue-500">
|
|
Search for "{searchQuery}"
|
|
</span>
|
|
</motion.button>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
} |