Cita destacada.

<blockquote class="ui-sample ui-content"><p>“El mapa debe explicar tanto lo que muestra como lo que omite.”</p><footer><cite>Nota metodológica del proyecto</cite></footer></blockquote>

<blockquote class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950"><p>“El mapa debe explicar tanto lo que muestra como lo que omite.”</p><footer class="flex flex-wrap items-center justify-between gap-3"><cite>Nota metodológica del proyecto</cite></footer></blockquote>

import type { ReactNode } from "react";

export interface PullQuoteProps {
  /** Texto citado, sin comillas: el componente agrega las comillas tipográficas. Vacío no emite la cita. */
  children?: ReactNode;
  /** Autor u obra de donde viene la cita; vacío omite el pie. */
  source?: string;
  className?: string;
}

/**
 * Cita destacada que repite una frase breve del texto o de una fuente, con su atribución; se intercala entre los párrafos de un artículo largo.
 *
 * @example <PullQuote source="Nota metodológica del proyecto">La comparación necesita una escala común.</PullQuote>
 */
export function PullQuote({
  children = "El mapa debe explicar tanto lo que muestra como lo que omite.",
  source = "Nota metodológica del proyecto",
  className,
}: PullQuoteProps) {
  if (children == null || children === false || children === "") return null;
  return (
    <blockquote className={["ui-content", className].filter(Boolean).join(" ")}>
      <p>“{children}”</p>
      {source ? (
        <footer>
          <cite>{source}</cite>
        </footer>
      ) : null}
    </blockquote>
  );
}