Footer columns

import * as React from "react";
import Link from "next/link";
import { ArrowUpRightIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export type FooterLink = {
  label: string;
  href: string;
  /** Opens in a new tab with a small arrow after the label. */
  external?: boolean;
};

export type FooterColumn = {
  title: string;
  links: FooterLink[];
};

type FooterColumnsProps = Omit<React.ComponentProps<"footer">, "children"> & {
  /** Wordmark or logo, usually a link to the home page. */
  brand: React.ReactNode;
  /** One line under the brand. */
  description?: string;
  /** Three or four columns of links, each with a mono heading. */
  columns?: FooterColumn[];
  /** Right side of the bottom bar: small links or social icons. */
  bottom?: React.ReactNode;
  /** Left side of the bottom bar, usually the copyright line. */
  legal?: string;
};

/**
 * A site footer: brand and one line on the left, columns of links on the right,
 * then a hairline and a bottom bar with the legal line and small links.
 */
export function FooterColumns({
  brand,
  description,
  columns = [],
  bottom,
  legal,
  className,
  ...props
}: FooterColumnsProps) {
  return (
    <footer data-slot="footer-columns" className={cn("w-full text-sm", className)} {...props}>
      <div className="mx-auto flex max-w-6xl flex-col gap-10 px-6 py-10 md:flex-row md:justify-between md:px-8">
        <div className="flex max-w-xs flex-col gap-3">
          <div className="flex items-center text-base font-medium">{brand}</div>
          {description && <p className="m-0 text-muted-foreground">{description}</p>}
        </div>
        {columns.length > 0 && (
          <nav
            aria-label="Footer"
            className="grid grid-cols-2 gap-x-8 gap-y-8 sm:grid-cols-[repeat(var(--columns),minmax(0,1fr))] sm:gap-x-12"
            style={{ "--columns": columns.length } as React.CSSProperties}
          >
            {columns.map((column) => (
              <div key={column.title} className="flex flex-col gap-3">
                <p className="m-0 font-mono text-xs tracking-wide text-muted-foreground uppercase">{column.title}</p>
                <ul className="m-0 flex list-none flex-col gap-2 p-0">
                  {column.links.map((link) => (
                    <li key={`${link.href}-${link.label}`}>
                      <FooterAnchor link={link} />
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        )}
      </div>
      {(legal || bottom) && (
        <div className="border-t">
          <div className="mx-auto flex max-w-6xl flex-col gap-3 px-6 py-5 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between md:px-8">
            {legal && <p className="m-0">{legal}</p>}
            {bottom && <div className="flex flex-wrap items-center gap-4">{bottom}</div>}
          </div>
        </div>
      )}
    </footer>
  );
}

function FooterAnchor({ link }: { link: FooterLink }) {
  const classes =
    "inline-flex items-center gap-1 rounded-sm text-muted-foreground transition-colors duration-100 ease-out hover:text-foreground";
  if (link.external) {
    return (
      <a href={link.href} target="_blank" rel="noreferrer" className={classes}>
        {link.label}
        <ArrowUpRightIcon className="size-3" aria-hidden="true" />
        <span className="sr-only">, opens in a new tab</span>
      </a>
    );
  }
  return (
    <Link href={link.href} className={classes}>
      {link.label}
    </Link>
  );
}