aramjonghu-site/frontend/src/components/Header.tsx

import Aku from "../assets/images/aku.png";

interface NavItem {
    label: string;
    url: string;
}

interface PageItem {
    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.dev" },
        { label: "Navidrome", url: "https://music.aramjonghu.dev" },
        { label: "Forgejo Git", url: "https://git.aramjonghu.dev" },
        { label: "Omnisearch", url: "https://xng.aramjonghu.dev" },
        { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
    ];

    const pageItems: PageItem[] = [
        { label: "Stream", url: "/stream" },
        { label: "Contact", url: "/contact" },
    ];

    const goHome = () => {
        window.location.href = "/";
    };

    return (
        <header className="bg-ctp-mantle flex justify-between items-center px-4 md:px-12 py-4 md:py-6 gap-4 md: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-2 md:gap-3 items-start">
                {navItems.map((nav) => (
                    <a
                        key={nav.label}
                        href={nav.url}
                        className="ui-btn ui-btn:hover px-2 py-1 md:px-3 md:py-1"
                    >
                        {nav.label}
                    </a>
                ))}
            </nav>
            <nav className="flex flex-wrap gap-2 md:gap-3 items-end">
                {pageItems.map((page) => (
                    <a
                        key={page.label}
                        href={page.url}
                        className="ui-btn ui-btn:hover px-2 py-1 md:px-3 md:py-1"
                    >
                        {page.label}
                    </a>
                ))}
            </nav>

            <div>
                <button
                    className="theme-ui-btn ui-btn:hover text-lg font-[NerdFontSymbols]"
                    onClick={toggleTheme}
                >
                    {currentTheme === "macchiato" ? "" : ""}
                </button>
            </div>
        </header>
    );
}