Switch to vite and preact

src/app/components/Header.tsx

@@ -0,0 +1,55 @@
+import { getCurrentUrl, Link } from 'preact-router'
+import { Btn, BtnMenu, Octicon } from '.'
+import config from '../../config.json'
+import { locale } from '../Locales'
+
+const Themes: Record<string, keyof typeof Octicon> = {
+	system: 'device_desktop',
+	dark: 'moon',
+	light: 'sun',
+}
+
+type HeaderProps = {
+	lang: string,
+	title: string,
+	theme: string,
+	changeTheme: (theme: string) => unknown,
+	language: string,
+	changeLanguage: (language: string) => unknown,
+}
+export function Header({ lang, title, theme, changeTheme, language, changeLanguage }: HeaderProps) {
+	const loc = locale.bind(null, lang)
+	return <header>
+		<div class="header-title">
+			<Link class="home-link" href={getCurrentUrl().match(/^\/worldgen\/.+/) ? '/worldgen/' : '/'}>
+				{Octicon.three_bars}
+			</Link>
+			<h2>{title}</h2>
+		</div>
+		<nav>
+			<ul>
+				<li>
+					<BtnMenu icon="globe">
+						{config.languages.map(({ code, name }) =>
+							<Btn label={name} active={code === language}
+								onClick={() => changeLanguage(code)} />
+						)}
+					</BtnMenu>
+				</li>
+				<li>
+					<BtnMenu icon={Themes[theme]}>
+						{Object.entries(Themes).map(([th, icon]) =>
+							<Btn icon={icon} label={loc(`theme.${th}`)} active={th === theme}
+								onClick={() => changeTheme(th)} />
+						)}
+					</BtnMenu>
+				</li>
+				<li class="dimmed">
+					<a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" title={loc('github')}>
+						{Octicon.mark_github}
+					</a>
+				</li>
+			</ul>
+		</nav>
+	</header>
+}