Adjuntos.

<section class="ui-sample ui-service" data-attachment-list="true"><header><strong>Adjuntos</strong><span>1 archivo · 2,4 MB</span></header><ul><li><span>contrato-v4.pdf · 2,4 MB</span><progress value="100" max="100">100%</progress><button class="btn btn--secondary btn--sm" type="button">Quitar</button></li></ul></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-attachment-list="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Adjuntos</strong><span>1 archivo · 2,4 MB</span></header><ul class="grid gap-2"><li><span>contrato-v4.pdf · 2,4 MB</span><progress value="100" max="100">100%</progress><button class="btn btn--secondary btn--sm border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Quitar</button></li></ul></section>

import type { MouseEventHandler } from "react";

export interface AttachmentListItem {
  /** Nombre del archivo, con su extensión. */
  name: string;
  /** Tamaño con su unidad («2,4 MB»); se muestra después del nombre. */
  size?: string;
  /** Avance de la carga, de 0 a 100; sin valor no se muestra la barra. */
  progress?: number;
  /** Texto de la barra de avance; por defecto el porcentaje redondeado («68%»). */
  progressLabel?: string;
  /** Se llama al quitar el archivo o al cancelar su carga. */
  onRemove?: MouseEventHandler<HTMLButtonElement>;
}

export interface AttachmentListProps {
  title?: string;
  /** Resumen del conjunto: cantidad de archivos y tamaño total («2 archivos · 3,1 MB»); vacío lo oculta. */
  summary?: string;
  /** Un elemento por archivo adjunto o en carga. */
  items?: AttachmentListItem[];
  /** Texto del botón de un archivo que terminó de cargar. */
  removeLabel?: string;
  /** Texto del botón de un archivo cuya carga no termina (`progress` menor que 100). */
  cancelLabel?: string;
  className?: string;
}

const ATTACHMENT_LIST_ITEMS: AttachmentListItem[] = [{ name: "contrato-v4.pdf", size: "2,4 MB", progress: 100 }];

/**
 * Lista de archivos adjuntos con su tamaño, avance de carga y botón para quitar cada uno; se usa al redactar un mensaje o completar una solicitud.
 *
 * Mientras un archivo carga, su botón dice `cancelLabel`; al terminar, `removeLabel`. En ambos casos llama a `onRemove` del archivo. Cada fila lleva su botón secundario pequeño (`btn--secondary btn--sm`).
 *
 * @example <AttachmentList summary="1 archivo · 2,4 MB" items={[{ name: "contrato-v4.pdf", size: "2,4 MB", progress: 100, onRemove: quitar }]} />
 * @example <AttachmentList summary="2 archivos · 3,1 MB" items={[{ name: "contrato-v4.pdf", size: "2,4 MB", progress: 100 }, { name: "anexo.csv", size: "0,7 MB", progress: 68 }]} />
 */
export function AttachmentList({
  title = "Adjuntos",
  summary = "1 archivo · 2,4 MB",
  items = ATTACHMENT_LIST_ITEMS,
  removeLabel = "Quitar",
  cancelLabel = "Cancelar",
  className,
}: AttachmentListProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-attachment-list>
      <header>
        <strong>{title}</strong>
        {summary ? <span>{summary}</span> : null}
      </header>
      {items.length ? (
        <ul>
          {items.map((item, i) => {
            const cargando = item.progress !== undefined && item.progress < 100;
            return (
              <li key={`${item.name}-${i}`}>
                <span>{item.size ? `${item.name} · ${item.size}` : item.name}</span>
                {item.progress !== undefined ? (
                  <progress value={item.progress} max={100}>{item.progressLabel ?? `${Math.round(item.progress)}%`}</progress>
                ) : null}
                <button className="btn btn--secondary btn--sm" type="button" onClick={item.onRemove}>{cargando ? cancelLabel : removeLabel}</button>
              </li>
            );
          })}
        </ul>
      ) : null}
    </section>
  );
}