Spaces:
Build error
Build error
| import Link from 'next/link'; | |
| import { useState } from 'react'; | |
| export default function Header() { | |
| const [isMenuOpen, setIsMenuOpen] = useState(false); | |
| return ( | |
| <header className="bg-white shadow-sm border-b border-gray-200 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 h-16"> | |
| {/* Logo */} | |
| <div className="flex items-center"> | |
| <Link href="/" className="text-2xl font-bold text-blue-600 hover:text-blue-700 transition-colors"> | |
| ReactApp | |
| </Link> | |
| </div> | |
| {/* Desktop Navigation */} | |
| <nav className="hidden md:flex space-x-8"> | |
| <Link href="/" className="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| Home | |
| </Link> | |
| <Link href="#features" className="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| Features | |
| </Link> | |
| <Link href="#about" className="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| About | |
| </Link> | |
| <Link href="#contact" className="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| Contact | |
| </Link> | |
| </nav> | |
| {/* Mobile menu button */} | |
| <div className="md:hidden"> | |
| <button | |
| onClick={() => setIsMenuOpen(!isMenuOpen)} | |
| className="text-gray-700 hover:text-blue-600 focus:outline-none focus:text-blue-600" | |
| > | |
| <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| {isMenuOpen ? ( | |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> | |
| ) : ( | |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /> | |
| )} | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| {/* Mobile Navigation */} | |
| {isMenuOpen && ( | |
| <div className="md:hidden"> | |
| <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-gray-50 rounded-lg mt-2"> | |
| <Link href="/" className="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium transition-colors"> | |
| Home | |
| </Link> | |
| <Link href="#features" className="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium transition-colors"> | |
| Features | |
| </Link> | |
| <Link href="#about" className="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium transition-colors"> | |
| About | |
| </Link> | |
| <Link href="#contact" className="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium transition-colors"> | |
| Contact | |
| </Link> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| </header> | |
| ); | |
| } |