feat: adicionar busca dinâmica de projetos no header com dropdown

frontend/src/components/Header.tsx

@@ -6,6 +6,7 @@ import { useState, useEffect } from 'react';
 import { useTheme } from "next-themes";
 import { useLocale } from '@/contexts/LocaleContext';
 import { localeFlags, localeNames, type Locale } from '@/lib/i18n';
+import SearchDropdown from './SearchDropdown';
 
 export default function Header() {
   const [isSearchOpen, setIsSearchOpen] = useState(false);
@@ -132,8 +133,12 @@ export default function Header() {
         </Link>
 
         <div className="hidden md:flex items-center gap-4">
-          {/* Search Bar */}
-          <div className={`flex items-center bg-gray-100 dark:bg-white/10 rounded-full transition-all duration-300 ${isSearchOpen ? 'w-64 px-4 py-2' : 'w-10 h-10 justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-white/20'}`} onClick={() => !isSearchOpen && setIsSearchOpen(true)}>
+          {/* Search Bar with Dropdown */}
+          <div className="relative">
+            <div 
+              className={`flex items-center bg-gray-100 dark:bg-white/10 rounded-full transition-all duration-300 ${isSearchOpen ? 'w-64 px-4 py-2' : 'w-10 h-10 justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-white/20'}`} 
+              onClick={() => !isSearchOpen && setIsSearchOpen(true)}
+            >
               <i className={`ri-search-line text-gray-500 dark:text-gray-300 ${isSearchOpen ? 'mr-2' : 'text-lg'}`}></i>
               {isSearchOpen && (
                 <input 
@@ -144,6 +149,8 @@ export default function Header() {
                     className="bg-transparent border-none outline-none text-sm w-full text-gray-600 dark:text-gray-200 placeholder-gray-400"
                 />
               )}
+            </div>
+            <SearchDropdown isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
           </div>
 
           <nav className="flex items-center gap-6 mr-4">