Site Footer Narrow

1import { getBrand } from "@/lib/brand"
2 
3const CONTENT = {
4  siteName: "",
5  tagline: "A narrow personal site built with AtroUI.",
6  links: [
7    { href: "/projects", label: "Projects" },
8    { href: "/writing", label: "Writing" },
9    { href: "/log", label: "Log" },
10    { href: "/stack", label: "Stack" },
11    { href: "/resume", label: "Resume" },
12    { href: "/contact", label: "Contact" },
13    { href: "https://github.com", label: "GitHub", external: true },
14    { href: "https://x.com", label: "X", external: true },
15    { href: "/rss.xml", label: "RSS" },
16  ] as Array<{ href: string; label: string; external?: boolean }>,
17}
18 
19export function SiteFooterNarrow({
20  siteName,
21  tagline = CONTENT.tagline,
22  links = CONTENT.links,
23  className,
24}: {
25  siteName?: string
26  tagline?: string
27  links?: Array<{ href: string; label: string; external?: boolean }>
28  className?: string
29} = {}) {
30  const brand = getBrand()
31  const name = siteName || CONTENT.siteName || brand.name
32 
33  return (
34    <footer
35      className={
36        className ??
37        "mt-auto border-t border-border-subtle pb-[env(safe-area-inset-bottom)]"
38      }
39    >
40      <div className="mx-auto flex max-w-[640px] flex-col gap-8 px-5 py-8 text-[12px] text-muted-foreground sm:flex-row sm:items-start sm:justify-between sm:gap-10">
41        <div className="min-w-0 space-y-1.5">
42          <div className="font-mono text-[12px] tracking-[-0.01em] text-foreground">
43            {name}
44          </div>
45          <p className="font-mono text-[11px] leading-[1.55] text-muted-foreground/80">
46            {tagline}
47          </p>
48        </div>
49 
50        <nav
51          aria-label="Footer"
52          className="grid shrink-0 grid-cols-3 gap-x-5 gap-y-1.5 font-mono text-[11.5px] sm:grid-cols-4 sm:justify-items-end"
53        >
54          {links.map((item) => (
55            <a
56              key={item.href}
57              href={item.href}
58              {...(item.external
59                ? { target: "_blank", rel: "noopener noreferrer" }
60                : {})}
61              className="hover:text-foreground"
62            >
63              {item.label}
64            </a>
65          ))}
66        </nav>
67      </div>
68    </footer>
69  )
70}