Footer mínimo

/**
 * Footer mínimo de una sola línea: marca, enlaces y un enlace para volver arriba. Se parte en dos líneas en pantallas estrechas.
 *
 *   <MinimalFooter brand="Estudio Lumen" links={[{ label: "Privacidad", href: "/privacidad" }, { label: "Contacto", href: "/contacto" }]} />
 */

import type { CSSProperties } from "react";

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

export type MinimalFooterProps = {
  brand?: string;
  links?: FooterLink[];
  /** Texto del enlace para volver arriba. Pasa null para ocultarlo. */
  topLabel?: string | null;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcfm-root { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; box-sizing: border-box; padding: 22px clamp(20px, 4vw, 48px); border-top: 1px solid #dcdce2; background: #fff; color: #5a5a66; font-family: inherit; font-size: 14px; }
.gcfm-brand { color: #17171c; font-weight: 700; letter-spacing: -.01em; }
.gcfm-brand small { margin-left: 10px; color: #7b7b88; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.gcfm-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
.gcfm-nav a, .gcfm-top { position: relative; color: inherit; text-decoration: none; transition: color .2s; }
.gcfm-nav a::after, .gcfm-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.gcfm-nav a:hover, .gcfm-top:hover { color: #17171c; }
.gcfm-nav a:hover::after, .gcfm-top:hover::after { transform: scaleX(1); }
.gcfm-nav a:focus-visible, .gcfm-top:focus-visible { outline: 2px solid #17171c; outline-offset: 4px; border-radius: 2px; }
.gcfm-top { display: inline-flex; align-items: center; gap: 6px; }
.gcfm-top svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.gcfm-top:hover svg { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .gcfm-nav a::after, .gcfm-top::after, .gcfm-top svg { transition: none; } }
`;

export function MinimalFooter({
  brand = "Estudio Lumen",
  links = [{ label: "Privacidad", href: "#privacidad" }, { label: "Términos", href: "#terminos" }, { label: "Contacto", href: "#contacto" }],
  topLabel = "Volver arriba",
  className,
  style,
}: MinimalFooterProps) {
  const year = new Date().getFullYear();

  return (
    <>
      <style>{CSS}</style>
      <footer className={["gcfm-root", className].filter(Boolean).join(" ")} style={style}>
        <span className="gcfm-brand">{brand}<small>© {year}</small></span>
        <ul className="gcfm-nav">{links.map((link) => <li key={link.href}><a href={link.href}>{link.label}</a></li>)}</ul>
        {topLabel ? (
          <a className="gcfm-top" href="#top">{topLabel}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7" /></svg></a>
        ) : null}
      </footer>
    </>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/footer-minimal

import { MinimalFooter } from "./minimal-footer";

export default function Ejemplo() {
  return <MinimalFooter brand="Ejemplo" />;
}