File size: 3,271 Bytes
b190b45 |
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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import React, { useState, useEffect } from 'react';
import { Search, Bell, Settings, Sun, Moon } from 'lucide-react';
interface HeaderProps {
currentPage?: string;
}
export const Header: React.FC<HeaderProps> = ({ currentPage = 'Dashboard' }) => {
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
const [searchQuery, setSearchQuery] = useState('');
useEffect(() => {
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' || 'dark';
setTheme(savedTheme);
document.documentElement.setAttribute('data-theme', savedTheme);
}, []);
const toggleTheme = () => {
const newTheme = theme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
document.documentElement.setAttribute('data-theme', newTheme);
};
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
if (searchQuery.trim()) {
console.log('Search query:', searchQuery);
// Implement search functionality
}
};
return (
<header className="header" role="banner">
{/* Left Section - Breadcrumb */}
<div className="header-left">
<div className="header-breadcrumb">
<div className="breadcrumb-item">
<a href="/">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
</a>
</div>
<span className="breadcrumb-separator">/</span>
<div className="breadcrumb-item active">
<span>{currentPage}</span>
</div>
</div>
</div>
{/* Center Section - Search */}
<div className="header-center">
<form className="header-search" onSubmit={handleSearch}>
<Search className="header-search-icon" size={16} />
<input
type="text"
className="header-search-input"
placeholder="Search..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</form>
</div>
{/* Right Section - Actions */}
<div className="header-right">
{/* API Status Indicator */}
<div className="status-indicator">
<span className="status-dot"></span>
<span>API Live</span>
</div>
{/* Notifications */}
<button className="icon-btn" aria-label="Notifications" title="Notifications">
<Bell size={20} />
</button>
{/* Theme Toggle */}
<button
className="icon-btn"
aria-label="Toggle theme"
title="Toggle theme"
onClick={toggleTheme}
>
{theme === 'light' ? <Sun size={20} /> : <Moon size={20} />}
</button>
{/* Settings */}
<a href="/settings" className="icon-btn" aria-label="Settings" title="Settings">
<Settings size={20} />
</a>
</div>
</header>
);
};
export default Header;
|