64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import React from "react";
|
|
|
|
type Social = { label: string; href: string; icon?: React.ReactNode };
|
|
|
|
export function Footer({
|
|
year = new Date().getFullYear(),
|
|
socials = [
|
|
{ label: "GitHub", href: "#" },
|
|
{ label: "LinkedIn", href: "#" },
|
|
{ label: "Email", href: "#" },
|
|
],
|
|
showBackToTop = true,
|
|
}: {
|
|
year?: number;
|
|
socials?: Social[];
|
|
showBackToTop?: boolean;
|
|
}) {
|
|
return (
|
|
<footer className="border-t border-secondary bg-bg px-4 py-10">
|
|
<div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row">
|
|
{/* Left: Brand + tagline */}
|
|
<div className="text-center md:text-left">
|
|
<div className="text-xl font-extrabold tracking-wide text-text">Jody Holt</div>
|
|
<p className="text-sm text-text/70">Design • Develop • Deliver</p>
|
|
</div>
|
|
|
|
{/* Middle: Links */}
|
|
<nav className="flex items-center gap-5">
|
|
<a className="text-text hover:text-primary" href="#projects">Projects</a>
|
|
<a className="text-text hover:text-primary" href="#experience">Experience</a>
|
|
<a className="text-text hover:text-primary" href="#home">Background</a>
|
|
</nav>
|
|
|
|
{/* Right: Socials */}
|
|
<div className="flex items-center gap-4 text-text">
|
|
{socials.map((s) => (
|
|
<a
|
|
key={s.label}
|
|
href={s.href}
|
|
aria-label={s.label}
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-secondary hover:border-primary hover:text-primary"
|
|
title={s.label}
|
|
>
|
|
{/* replace with real SVGs later */}
|
|
{s.icon ?? <span className="h-2.5 w-2.5 rounded-full bg-current" />}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-6 flex max-w-7xl items-center justify-center gap-4">
|
|
<div className="text-center text-xs text-text/60">© {year} Jody Holt • All rights reserved</div>
|
|
{showBackToTop && (
|
|
<button
|
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
|
className="rounded px-3 py-1 text-xs text-text/70 hover:text-primary border border-secondary hover:border-primary"
|
|
>
|
|
Back to top
|
|
</button>
|
|
)}
|
|
</div>
|
|
</footer>
|
|
);
|
|
} |