spb/company-atlas

1/**2 * React renderers of the Company Atlas mark. Geometry lives in `geometry.ts` (shared with the icon build script);3 * this file only turns the shape list into SVG elements (`MarkArt`) or into a data-URI `<img>` for Satori (`MarkImg`).4 */5import { type MarkColors, type MarkOptions, MARK_DARK, MARK_VIEWBOX, markDataUri, markShapes } from './geometry';67export { MARK_DARK, MARK_LIGHT, MARK_PLATE_RADIUS, MARK_TOKENS, MARK_VIEWBOX, markDataUri, markLevel, markSvgString } from './geometry';8export type { MarkColors, MarkLevel, MarkOptions } from './geometry';910/** Shapes only — wrap in your own <svg viewBox="0 0 64 64">. */11export function MarkArt({ colors, ...opts }: { colors: MarkColors } & MarkOptions) {12  return (13    <>14      {markShapes(colors, opts).map((s, i) => {15        const { 'stroke-width': sw, 'stroke-linecap': cap, ...rest } = s.attrs as Record<string, string | number | undefined>;16        const props = { ...rest, strokeWidth: sw, strokeLinecap: cap as 'round' | undefined };17        return s.tag === 'rect' ? <rect key={i} {...props} /> : <path key={i} {...props} />;18      })}19    </>20  );21}2223/** For ImageResponse routes (Satori rasterises `<img>` data URIs reliably). Fixed colours only — no CSS variables. */24export function MarkImg({ px, colors = MARK_DARK, ...opts }: { px: number; colors?: MarkColors } & MarkOptions) {25  // eslint-disable-next-line @next/next/no-img-element26  return <img width={px} height={px} src={markDataUri(colors, { ...opts, size: MARK_VIEWBOX })} alt="" style={{ width: px, height: px }} />;27}28