development/fe09e69b-7320-451e-852e-b36e5ae1efe3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
vitaliimulika-dev
2026-01-23 12:19:46 +02:00
commit d5432a0a4c
18 changed files with 2427 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Header.js Normal file
View File

@@ -0,0 +1,84 @@
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;