Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 1x 1x 1x 1x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 91x 91x 91x 91x 91x 91x 91x 91x 91x 91x 16x 16x 16x 91x 91x 91x 1x 1x 1x 91x 91x 13x 13x 13x 13x 13x | import type { ReactNode } from 'react'
import { CARD, STUDIO } from '@/components/studio/theme'
import { COMMITMENT_LABELS, COMMITMENT_ORDER, type CommitmentSummary } from './abacus-commitment'
export function PrintCommitmentCard({
summary,
plate,
heading = 'What you’ll print',
}: {
summary: CommitmentSummary
plate?: ReactNode
heading?: string
}) {
return (
<section data-element="print-commitment-card" aria-label={heading} style={CARD}>
<div style={{ ...STUDIO.type.eyebrow, marginBottom: 10 }}>{heading}</div>
<dl
style={{
display: 'grid',
gridTemplateColumns: '64px 1fr',
rowGap: STUDIO.space.card,
columnGap: 10,
margin: 0,
}}
>
{COMMITMENT_ORDER.map((key) => (
<div
key={key}
data-element="print-commitment-line"
data-line={key}
style={{ display: 'contents' }}
>
<dt style={STUDIO.type.note}>{COMMITMENT_LABELS[key]}</dt>
<dd style={{ ...STUDIO.type.value, margin: 0, lineHeight: 1.4 }}>
{summary[key].value}
{summary[key].note && (
<div data-element="print-commitment-note" style={STUDIO.type.note}>
{summary[key].note}
</div>
)}
</dd>
{key === 'pieces' && plate && (
<div data-element="print-commitment-plate" style={{ gridColumn: '1 / -1' }}>
{plate}
</div>
)}
</div>
))}
</dl>
</section>
)
}
|