FooterDev

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

/*!
 * FooterDev, a DesignPass.dev block by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/blocks/footer-dev
 * 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";
import SocialIcons, {
  type SocialIconItem,
} from "@/components/layout/SocialIcons";

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

const RAIL = "mx-auto w-full min-w-0 max-w-5xl px-4 sm:px-6 lg:px-8";

const DEFAULT_PRIMARY: FooterLink[] = [
  { label: "Docs", href: "#docs" },
  { label: "API", href: "#api" },
  { label: "Changelog", href: "#changelog" },
  { label: "Templates", href: "#templates" },
  { label: "Status", href: "#status" },
];

const DEFAULT_SECONDARY: FooterLink[] = [
  { label: "GitHub", href: "#github" },
  { label: "Discord", href: "#discord" },
  { label: "Blog", href: "#blog" },
  { label: "Careers", href: "#careers" },
];

const DEFAULT_LEGAL: FooterLink[] = [
  { label: "Privacy", href: "#privacy" },
  { label: "Terms", href: "#terms" },
  { label: "Security", href: "#security" },
];

const DEFAULT_SOCIAL: SocialIconItem[] = [
  { label: "GitHub", href: "#github", icon: "github" },
  { label: "X", href: "#x", icon: "x" },
  { label: "Discord", href: "#discord", icon: "discord" },
];

const SOCIAL_LINK_CLASS =
  "inline-flex size-9 items-center justify-center rounded-full border border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.1))] text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.5))] transition-colors hover:border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.25))] hover:text-[color:var(--tpl-chrome-ink,#fff)]";

export type FooterDevProps = {
  className?: string;
  brand?: string;
  primaryLinks?: FooterLink[];
  secondaryLinks?: FooterLink[];
  legalLinks?: FooterLink[];
  social?: SocialIconItem[];
  copyright?: ReactNode;
  copyrightOwner?: string;
  copyrightSuffix?: string;
};

/**
 * Vercel-style developer footer: docs, changelog, status, and GitHub first.
 * Social row via SocialIcons. Copyright year stays current via LiveCopyright.
 */
export default function FooterDev({
  className = "",
  brand = "Atlas",
  primaryLinks = DEFAULT_PRIMARY,
  secondaryLinks = DEFAULT_SECONDARY,
  legalLinks = DEFAULT_LEGAL,
  social = DEFAULT_SOCIAL,
  copyright,
  copyrightOwner,
  copyrightSuffix,
}: FooterDevProps) {
  const owner = copyrightOwner ?? brand;

  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} py-12 sm:py-14`}>
        <div className="flex flex-col gap-8 sm:flex-row sm:items-end sm:justify-between">
          <div className="min-w-0">
            <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.35))]">
              {brand}
            </p>
            <nav aria-label="Developer links" className="mt-5">
              <ul className="flex flex-wrap gap-x-5 gap-y-2">
                {primaryLinks.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.href}
                      className="text-sm font-medium text-[color:var(--tpl-chrome-ink,#fff)]/80 transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)]"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>
            <nav aria-label="Company links" className="mt-4">
              <ul className="flex flex-wrap gap-x-5 gap-y-2">
                {secondaryLinks.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.href}
                      className="text-sm text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.45))] transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)]/80"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>
          </div>
          <SocialIcons items={social} linkClassName={SOCIAL_LINK_CLASS} />
        </div>
        <div className="mt-10 flex flex-col gap-3 border-t border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.1))] pt-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.35))]">
            {copyright ?? <LiveCopyright owner={owner} suffix={copyrightSuffix} />}
          </p>
          <ul className="flex flex-wrap gap-x-4 gap-y-2">
            {legalLinks.map((link) => (
              <li key={link.label}>
                <a
                  href={link.href}
                  className="text-xs text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.4))] transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)]/70"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}