From bee1af01ec26daf9698f4192fe1fa700814a47ac Mon Sep 17 00:00:00 2001
From: Erik <erik@octtoengenharia.com>
Date: Mon, 1 Dec 2025 16:13:02 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adicionar=20busca=20din=C3=A2mica=20de?=
 =?UTF-8?q?=20projetos=20no=20header=20com=20dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header.tsx         |  11 +-
 frontend/src/components/SearchDropdown.tsx | 146 +++++++++++++++++++++
 2 files changed, 155 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/SearchDropdown.tsx

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index a1b686d..adcd788 100644
--- a/frontend/src/components/Header.tsx
+++ b/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">
diff --git a/frontend/src/components/SearchDropdown.tsx b/frontend/src/components/SearchDropdown.tsx
new file mode 100644
index 0000000..ab6232e
--- /dev/null
+++ b/frontend/src/components/SearchDropdown.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useLocale } from '@/contexts/LocaleContext';
+
+interface Project {
+  id: string;
+  title: string;
+  coverImage: string | null;
+  category?: string;
+}
+
+interface SearchDropdownProps {
+  onClose?: () => void;
+  isOpen: boolean;
+}
+
+export default function SearchDropdown({ onClose, isOpen }: SearchDropdownProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [results, setResults] = useState<Project[]>([]);
+  const [allProjects, setAllProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { locale } = useLocale();
+
+  // Prefixo para links baseado no locale
+  const prefix = locale === 'pt' ? '' : `/${locale}`;
+
+  // Carregar todos os projetos uma vez
+  useEffect(() => {
+    async function fetchProjects() {
+      try {
+        const res = await fetch('/api/projects', { cache: 'no-store' });
+        if (res.ok) {
+          const data = await res.json();
+          setAllProjects(data);
+        }
+      } catch (error) {
+        console.error('Erro ao carregar projetos:', error);
+      }
+    }
+
+    if (isOpen) {
+      fetchProjects();
+    }
+  }, [isOpen]);
+
+  // Filtrar resultados conforme o usuário digita
+  useEffect(() => {
+    if (!searchTerm.trim()) {
+      setResults([]);
+      return;
+    }
+
+    setLoading(true);
+    
+    // Simular pequeno delay para evitar renderizações desnecessárias
+    const timer = setTimeout(() => {
+      const filtered = allProjects.filter(project =>
+        project.title.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setResults(filtered.slice(0, 5)); // Limitar a 5 resultados
+      setLoading(false);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm, allProjects]);
+
+  const defaultImage = 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=200&auto=format&fit=crop';
+
+  return (
+    <>
+      {/* Dropdown Overlay */}
+      {isOpen && searchTerm && (
+        <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-secondary rounded-lg shadow-xl border border-gray-200 dark:border-white/10 z-50 max-w-md w-full">
+          {loading && (
+            <div className="p-6 text-center">
+              <div className="animate-spin inline-block">
+                <i className="ri-loader-4-line text-2xl text-primary"></i>
+              </div>
+            </div>
+          )}
+
+          {!loading && results.length === 0 && searchTerm && (
+            <div className="p-6 text-center text-gray-500 dark:text-gray-400">
+              <i className="ri-search-line text-3xl mb-3 block opacity-50"></i>
+              <p>Nenhum projeto encontrado com "{searchTerm}"</p>
+            </div>
+          )}
+
+          {!loading && results.length > 0 && (
+            <div className="max-h-96 overflow-y-auto">
+              {results.map((project) => (
+                <Link
+                  key={project.id}
+                  href={`${prefix}/projetos`}
+                  onClick={() => {
+                    setSearchTerm('');
+                    onClose?.();
+                  }}
+                  className="flex items-center gap-3 p-3 hover:bg-gray-50 dark:hover:bg-white/5 border-b border-gray-100 dark:border-white/10 last:border-b-0 transition-colors group"
+                >
+                  <div className="relative w-16 h-16 flex-shrink-0 rounded-lg overflow-hidden bg-gray-200 dark:bg-white/5">
+                    <Image
+                      src={project.coverImage || defaultImage}
+                      alt={project.title}
+                      fill
+                      className="object-cover group-hover:scale-110 transition-transform duration-300"
+                      sizes="64px"
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-semibold text-gray-900 dark:text-white truncate group-hover:text-primary transition-colors">
+                      {project.title}
+                    </h3>
+                    {project.category && (
+                      <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                        {project.category}
+                      </p>
+                    )}
+                  </div>
+                  <i className="ri-arrow-right-line text-gray-400 group-hover:text-primary transition-colors flex-shrink-0 opacity-0 group-hover:opacity-100"></i>
+                </Link>
+              ))}
+
+              {results.length > 0 && (
+                <Link
+                  href={`${prefix}/projetos`}
+                  onClick={() => {
+                    setSearchTerm('');
+                    onClose?.();
+                  }}
+                  className="flex items-center justify-center gap-2 p-3 text-primary font-medium hover:bg-primary/10 border-t border-gray-100 dark:border-white/10 transition-colors group"
+                >
+                  <span>Ver todos os projetos</span>
+                  <i className="ri-arrow-right-line group-hover:translate-x-1 transition-transform"></i>
+                </Link>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}