Header + Footer ready for deployment

2026-06-07 19:38:24 +02:00 · 2026-04-10 01:27:02 +02:00
parent 5941df3c39
commit 63d5cf743a
24 changed files with 136 additions and 2813 deletions
@@ -0,0 +1,24 @@
+import forgejo from "../assets/images/forgejo.svg";
+
+export default function Footer() {
+    const currentYear = new Date().getFullYear();
+
+    const goToRepo = () => {
+        window.location.href = "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site";
+    };
+
+    return (
+        <footer className="flex items-center justify-between px-12 py-6 border-t border-ctp-lavender-800 mt-10">
+            <p className="text-sm text-ctp-text">
+                &copy; {currentYear} AramJonghu. All rights reserved.
+            </p>
+
+            <img
+                src={forgejo}
+                alt="Forgejo repository"
+                onClick={goToRepo}
+                className="w-6 h-6 cursor-pointer hover:opacity-80 transition-opacity"
+            />
+        </footer>
+    );
+}
@@ -0,0 +1,53 @@
+import Aku from "../assets/images/aku.png";
+
+export default function Header() {
+    const navItems = [
+        {
+            label: "Nextcloud",
+            url: "https://aramjonghu.nl/nextcloud",
+        },
+        {
+            label: "Navidrome",
+            url: "https://music.aramjonghu.nl",
+        },
+        {
+            label: "Forgejo Git",
+            url: "https://git.aramjonghu.nl",
+        },
+        {
+            label: "Stream",
+            url: "https://stream.aramjonghu.nl",
+        },
+        {
+            label: "SearXNG",
+            url: "https://xng.aramjonghu.nl",
+        },
+    ];
+
+    const goHome = () => {
+        window.location.href = "/";
+    };
+
+    return (
+        <header className="flex items-center px-12 py-6 gap-6">
+            <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="text-ctp-text hover:text-ctp-green-900 border rounded border-ctp-white-800 hover:border-ctp-green-900 cursor-pointer px-3 py-1 transition-colors"
+                    >
+                        {item.label}
+                    </a>
+                ))}
+            </nav>
+        </header>
+    );
+}
@@ -0,0 +1,16 @@
+import Footer from "./Footer";
+import Header from "./Header";
+
+export default function Layout({ children }) {
+    return (
+        <div className="flex flex-col bg-ctp-base">
+            <Header />
+
+            <main className="flex">
+                {children}
+            </main>
+
+            <Footer />
+        </div>
+    );
+}