TS7 upgrade + write to TS over JS

2026-09-06 07:33:29 +02:00 · 2026-06-21 15:10:23 +02:00
parent 45b95b5f0c
commit b62fa8a292
16 changed files with 401 additions and 255 deletions
@@ -0,0 +1,61 @@
+import Aku from "../assets/images/aku.png";
+
+interface NavItem {
+    label: string;
+    url: string;
+}
+
+interface HeaderTheme {
+    theme: string;
+    toggleTheme: () => void;
+}
+
+interface HeaderProps {
+    theme: HeaderTheme;
+}
+
+export default function Header({ theme }: HeaderProps) {
+    const { theme: currentTheme, toggleTheme } = theme;
+
+    const navItems: NavItem[] = [
+        { label: "Nextcloud", url: "https://nextcloud.aramjonghu.nl" },
+        { label: "Navidrome", url: "https://music.aramjonghu.nl" },
+        { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
+        { label: "Stream", url: "/stream" },
+        { label: "Omnisearch", url: "https://xng.aramjonghu.nl" },
+        { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
+    ];
+
+    const goHome = () => {
+        window.location.href = "/";
+    };
+
+    return (
+        <header className="bg-ctp-mantle flex justify-between items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
+            <img
+                className="size-16 cursor-pointer"
+                src={Aku}
+                alt="Home"
+                onClick={goHome}
+            />
+
+            <nav className="flex flex-wrap gap-3 items-center">
+                {navItems.map((item) => (
+                    <a
+                        key={item.label}
+                        href={item.url}
+                        className="ui-btn ui-btn:hover"
+                    >
+                        {item.label}
+                    </a>
+                ))}
+            </nav>
+
+            <div>
+                <button className="ui-btn ui-btn:hover" onClick={toggleTheme}>
+                    {currentTheme === "macchiato" ? "🌙 Dark" : "☀️ Light"}
+                </button>
+            </div>
+        </header>
+    );
+}