84 lines
4.2 KiB
JavaScript
84 lines
4.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Search, Menu, X, Github } from 'lucide-react';
|
|
|
|
function Header() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 bg-white border-b border-react-border z-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo */}
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-react-blue rounded-full flex items-center justify-center">
|
|
<div className="w-6 h-6 border-2 border-white rounded-full relative">
|
|
<div className="absolute inset-0 border-2 border-white rounded-full transform rotate-45"></div>
|
|
<div className="absolute inset-0 border-2 border-white rounded-full transform -rotate-45"></div>
|
|
<div className="absolute top-1/2 left-1/2 w-2 h-2 bg-white rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
|
|
</div>
|
|
</div>
|
|
<span className="text-xl font-bold text-react-dark">React</span>
|
|
<span className="text-sm text-react-gray bg-react-light-gray px-2 py-1 rounded">v19.2</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="hidden md:flex items-center flex-1 max-w-md mx-8">
|
|
<div className="relative w-full">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-react-gray w-4 h-4" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
className="w-full pl-10 pr-12 py-2 border border-react-border rounded-lg focus:outline-none focus:ring-2 focus:ring-react-blue focus:border-transparent"
|
|
/>
|
|
<div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center space-x-1">
|
|
<kbd className="px-2 py-1 text-xs bg-react-light-gray border border-react-border rounded">Ctrl</kbd>
|
|
<kbd className="px-2 py-1 text-xs bg-react-light-gray border border-react-border rounded">K</kbd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
<a href="#" className="text-react-dark hover:text-react-blue font-medium">Learn</a>
|
|
<a href="#" className="text-react-dark hover:text-react-blue font-medium">Reference</a>
|
|
<a href="#" className="text-react-dark hover:text-react-blue font-medium">Community</a>
|
|
<a href="#" className="text-react-dark hover:text-react-blue font-medium">Blog</a>
|
|
<Github className="w-5 h-5 text-react-gray hover:text-react-dark cursor-pointer" />
|
|
</nav>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
className="md:hidden p-2"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden bg-white border-t border-react-border">
|
|
<div className="px-4 py-2 space-y-2">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-react-gray w-4 h-4" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
className="w-full pl-10 pr-4 py-2 border border-react-border rounded-lg focus:outline-none focus:ring-2 focus:ring-react-blue focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Learn</a>
|
|
<a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Reference</a>
|
|
<a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Community</a>
|
|
<a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Blog</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Header; |