FooterCompact

npx shadcn@latest add "https://designpass.dev/r/FooterCompact-TS-TW.json"

/*!
 * FooterCompact, a DesignPass.dev block by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/blocks/footer-compact
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import type { ReactNode } from "react";
import LiveCopyright from "@/components/layout/LiveCopyright";

export type FooterLink = { label: string; href: string };

const RAIL =
  "mx-auto flex w-full min-w-0 max-w-5xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8";

const DEFAULT_LINKS: FooterLink[] = [
  { label: "Privacy", href: "#privacy" },
  { label: "Terms", href: "#terms" },
  { label: "Contact", href: "#contact" },
];

export type FooterCompactProps = {
  className?: string;
  brand?: ReactNode;
  links?: FooterLink[];
  copyright?: ReactNode;
  copyrightOwner?: string;
  copyrightSuffix?: string;
};

/**
 * Single-bar footer. Colors follow --tpl-chrome*.
 * Copyright year stays current via the shared LiveCopyright component.
 */
export default function FooterCompact({
  className = "",
  brand = "Atlas",
  links = DEFAULT_LINKS,
  copyright,
  copyrightOwner,
  copyrightSuffix,
}: FooterCompactProps) {
  const owner = copyrightOwner ?? (typeof brand === "string" ? brand : "Atlas");

  return (
    <footer
      className={`w-full border-t border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.1))] bg-[var(--tpl-chrome,#0a0a0a)] text-[color:var(--tpl-chrome-ink,#fff)] ${className}`.trim()}
    >
      <div className={`${RAIL} flex-col py-6 sm:flex-row sm:py-7`}>
        <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2">
          <div className="flex items-center text-sm font-semibold leading-none tracking-tight">
            {brand}
          </div>
          <nav aria-label="Footer">
            <ul className="flex flex-wrap items-center gap-x-4 gap-y-2">
              {links.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="text-sm leading-none text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.5))] transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)]"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        </div>
        <p className="shrink-0 text-xs text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.35))]">
          {copyright ?? <LiveCopyright owner={owner} suffix={copyrightSuffix} />}
        </p>
      </div>
    </footer>
  );
}