|
193
|
1 import React from 'react';
|
|
|
2
|
|
|
3 // Icons
|
|
|
4 const ICONS = {
|
|
|
5 repo: "/public/epi_all_colors.svg",
|
|
|
6 };
|
|
|
7
|
|
|
8 const SunIcon = () => (
|
|
|
9 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
|
10 <circle cx="12" cy="12" r="5"/>
|
|
|
11 <line x1="12" y1="1" x2="12" y2="3"/>
|
|
|
12 <line x1="12" y1="21" x2="12" y2="23"/>
|
|
|
13 <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
|
14 <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
|
15 <line x1="1" y1="12" x2="3" y2="12"/>
|
|
|
16 <line x1="21" y1="12" x2="23" y2="12"/>
|
|
|
17 <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
|
18 <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
|
19 </svg>
|
|
|
20 );
|
|
|
21
|
|
|
22 const MoonIcon = () => (
|
|
|
23 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
|
24 <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
|
25 </svg>
|
|
|
26 );
|
|
|
27
|
|
|
28 interface HeaderProps {
|
|
|
29 title?: string;
|
|
|
30 subtitle?: string;
|
|
|
31 showThemeToggle?: boolean;
|
|
|
32 isDark?: boolean;
|
|
|
33 onToggleTheme?: () => void;
|
|
|
34 }
|
|
|
35
|
|
|
36 function Header({
|
|
|
37 title = "Zenbu Repository",
|
|
|
38 subtitle,
|
|
|
39 showThemeToggle = true,
|
|
|
40 isDark = false,
|
|
|
41 onToggleTheme,
|
|
|
42 }: HeaderProps) {
|
|
|
43 return (
|
|
|
44 <header className="header">
|
|
|
45 <img src={ICONS.repo} alt="Zenbu" className="header-icon" />
|
|
|
46 <div className="header-content">
|
|
|
47 <h1><a href="/">{title}</a></h1>
|
|
|
48 {subtitle && <p className="header-subtitle">{subtitle}</p>}
|
|
|
49 </div>
|
|
|
50 {showThemeToggle && onToggleTheme && (
|
|
|
51 <button className="theme-toggle" onClick={onToggleTheme} title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
|
|
|
52 {isDark ? <SunIcon /> : <MoonIcon />}
|
|
|
53 <span>{isDark ? 'Light' : 'Dark'}</span>
|
|
|
54 </button>
|
|
|
55 )}
|
|
|
56 </header>
|
|
|
57 );
|
|
|
58 }
|
|
|
59
|
|
|
60 export { Header };
|
