Spaces:
Sleeping
Sleeping
File size: 3,440 Bytes
42ccbd9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import React, { useState } from 'react';
import { Menu, X, Moon, Sun, Activity } from 'lucide-react';
import { useTheme } from '../context/ThemeContext';
export function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const { isDark, toggleTheme } = useTheme();
const navItems = [
{ label: 'Solutions', href: '#solutions' },
{ label: 'Dashboard', href: '#dashboard' },
{ label: 'Integrations', href: '#integrations' },
{ label: 'Analytics', href: '#analytics' },
];
return (
<header className="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-200/50 dark:border-slate-700/50 transition-all duration-300">
<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-3">
<div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-teal-500 rounded-xl flex items-center justify-center">
<Activity className="w-6 h-6 text-white" />
</div>
<div>
<h1 className="text-xl font-bold text-slate-900 dark:text-white">Health Matrix</h1>
<p className="text-xs text-slate-600 dark:text-slate-400 -mt-1">AI Command Center</p>
</div>
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center space-x-8">
{navItems.map((item) => (
<a
key={item.label}
href={item.href}
className="text-slate-700 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors duration-200"
>
{item.label}
</a>
))}
</nav>
{/* Theme Toggle & Mobile Menu */}
<div className="flex items-center space-x-4">
<button
onClick={toggleTheme}
className="p-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors duration-200"
>
{isDark ? <Sun className="w-5 h-5 text-yellow-500" /> : <Moon className="w-5 h-5 text-slate-600" />}
</button>
{/* Mobile menu button */}
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="md:hidden p-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors duration-200"
>
{isMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
</button>
</div>
</div>
{/* Mobile Navigation */}
{isMenuOpen && (
<div className="md:hidden py-4 border-t border-slate-200/50 dark:border-slate-700/50">
<nav className="flex flex-col space-y-3">
{navItems.map((item) => (
<a
key={item.label}
href={item.href}
onClick={() => setIsMenuOpen(false)}
className="text-slate-700 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium py-2 transition-colors duration-200"
>
{item.label}
</a>
))}
</nav>
</div>
)}
</div>
</header>
);
} |