Source

// The resume on screen: each page of the layout drawn as an SVG sheet, with the same fonts as the PDF.
import type { Layout } from "./layout";

const FAMILY = { sans: "Resume Sans", sansBold: "Resume Sans", serif: "Resume Serif" } as const;
const WEIGHT = { sans: 400, sansBold: 600, serif: 500 } as const;

export function Paper({ layout, label = "Resume", reflowed }: { layout: Layout; label?: string; reflowed?: boolean }) {
  const { width: W, height: H, pages } = layout;
  return (
    <div className={`sheets${reflowed ? " sheets-reflowed" : ""}`}>
      {pages.map((ops, p) => (
        <svg key={p} className="sheet" viewBox={`0 0 ${W} ${H}`} aria-label={pages.length > 1 ? `${label}, page ${p + 1} of ${pages.length}` : label}>
          <rect width={W} height={H} fill="#fff" />
          {ops.map((op, i) => op.kind === "text" ? (
            <text key={i} x={op.x} y={op.y} fontFamily={FAMILY[op.font]} fontWeight={WEIGHT[op.font]} fontSize={op.size} fill={op.color} letterSpacing={op.tracking || undefined} xmlSpace="preserve">{op.text}</text>
          ) : (
            <line key={i} x1={op.x1} x2={op.x2} y1={op.y} y2={op.y} stroke={op.color} strokeWidth={op.width} />
          ))}
        </svg>
      ))}
    </div>
  );
}