Mercurial

comparison hg-web/src/components/header.tsx @ 193:9f4429c49733 hg-web

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[HgWeb] Making progress....
author MrJuneJune <me@mrjunejune.com>
date Sun, 25 Jan 2026 20:04:55 -0800
parents
children
comparison
equal deleted inserted replaced
192:b818a4561a3c 193:9f4429c49733
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 };