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

import forgejo from "../assets/images/forgejo.svg";
import gitea from "../assets/images/gitea.svg";

export default function Footer() {
    const currentYear = new Date().getFullYear();

    const goToForgejo = () => {
        window.location.href =
            "https://git.aramjonghu.dev/AramJonghu/aramjonghu-site";
    };

    const goToGitea = () => {
        window.location.href =
            "https://git.zach-dev.cc/AramJonghu/aramjonghu-site";
    };

    return (
        <footer className="bg-ctp-mantle flex flex-col md:flex-row items-center justify-between gap-3 px-4 md:px-24 py-6 border-t border-ctp-lavender-800 mt-10">
            <p className="text-sm text-ctp-text">
                &copy; {currentYear} AramJonghu. All rights reserved.
            </p>
            <div className="flex items-center">
                <p className="text-sm text-ctp-text hidden sm:block">
                    Check out the website repository here:
                </p>

                <button
                    onClick={goToForgejo}
                    aria-label="Forgejo repository"
                    className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
                >
                    <img
                        src={forgejo}
                        alt="Forgejo repository"
                        className="w-7 h-7"
                    />
                </button>

                <button
                    onClick={goToGitea}
                    aria-label="Gitea mirror"
                    className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
                >
                    <img src={gitea} alt="Gitea mirror" className="w-7 h-7" />
                </button>
            </div>
        </footer>
    );
}