Upload components/Header.js with huggingface_hub

components/Header.js

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import { FiMenu, FiX } from 'react-icons/fi'
+import { HiSparkles } from 'react-icons/hi'
+
+export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const navigation = [
+    { name: 'Início', href: '/' },
+    { name: 'Biblioteca de Prompts', href: '/prompts' },
+    { name: 'Sobre', href: '#sobre' },
+    { name: 'Contato', href: '#contato' },
+  ]
+
+  return (
+    <header className="bg-white shadow-lg sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center py-4">
+          {/* Logo */}
+          <Link href="/" className="flex items-center space-x-2">
+            <div className="bg-primary-600 p-2 rounded-lg">
+              <HiSparkles className="h-6 w-6 text-white" />
+            </div>
+            <div>
+              <span className="text-xl font-bold text-primary-700">AI.Wiki.BR</span>
+              <p className="text-xs text-gray-600 -mt-1">Por Prof. Gabriel Ramos</p>
+            </div>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex space-x-8">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200"
+              >
+                {item.name}
+              </Link>
+            ))}
+          </nav>
+
+          {/* Mobile menu button */}
+          <button
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            className="md:hidden p-2 rounded-lg text-gray-600 hover:text-primary-600 hover:bg-gray-100"
+          >
+            {isMenuOpen ? <FiX className="h-6 w-6" /> : <FiMenu className="h-6 w-6" />}
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && (
+          <div className="md:hidden border-t border-gray-200 py-4">
+            <nav className="flex flex-col space-y-3">
+              {navigation.map((item) => (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className="text-gray-700 hover:text-primary-600 font-medium py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors duration-200"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  {item.name}
+                </Link>
+              ))}
+            </nav>
+          </div>
+        )}
+      </div>
+      
+      {/* Built with anycoder link */}
+      <div className="bg-primary-50 border-t border-primary-100">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
+          <p className="text-center text-sm">
+            <a 
+              href="https://huggingface.co/spaces/akhaliq/anycoder" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-primary-600 hover:text-primary-700 font-medium transition-colors duration-200"
+            >
+              Built with anycoder
+            </a>
+          </p>
+        </div>
+      </div>
+    </header>
+  )
+}