chess-scribe-website/src/components/Footer.tsx

import { Link } from "@tanstack/react-router";
import { Image } from "@unpic/react";

import { LuGithub, LuMail } from "react-icons/lu";

import CoffeeWidget from "#/components/CoffeeWidget.tsx";
import footerLogo from "@/assets/images/footerLogo.svg?url";

export default function Footer() {
	return (
		<footer className="text-white w-full grid-cols-2 items-center bg-(--accent) px-10 py-5">
			<div className="flex w-full items-center">
				<Link to="/">
					<Image
						src={footerLogo}
						alt="ChessScribe Logo"
						width={10}
						height={10}
						className="hidden h-10 w-10 sm:block"
					/>
				</Link>
				<div>
					<p data-testid="copyright">
						Copyright © 2023 - {new Date().getFullYear()}
					</p>
				</div>
				<div className="ml-auto flex gap-2">
					<Link
						to="/"
						target="_blank"
						rel="noopener noreferrer"
						className="text-2xl hover:text-(--neutral-content) transition-colors duration-300 ease-in-out"
					>
						<LuGithub />
					</Link>

					<Link
						to="/"
						target="_blank"
						rel="noopener noreferrer"
						className="text-2xl hover:text-(--neutral-content) transition-colors duration-300 ease-in-out"
					>
						<LuMail />
					</Link>
				</div>
				<CoffeeWidget width={20} height={50} />
			</div>
		</footer>
	);
}