| 1 |
import { PageCanvas } from '@auto-launch/templates/PageCanvas'; |
| 2 |
import { CARD } from '@auto-launch/templates/surface'; |
| 3 |
import { arrowRight, Icon } from '@wordpress/icons'; |
| 4 |
import classNames from 'classnames'; |
| 5 |
|
| 6 |
// Makes room for the highlighted box's negative top margin. |
| 7 |
const GRID = [ |
| 8 |
'relative z-10 grid w-full sm:mx-auto sm:grid-cols-2', |
| 9 |
'sm:pt-[var(--ext-tpl-choice-badge-height,28px)]', |
| 10 |
'[gap:var(--ext-tpl-choice-gap,24px)]', |
| 11 |
].join(' '); |
| 12 |
|
| 13 |
const WIDE = [ |
| 14 |
'sm:[max-width:var(--ext-tpl-choice-width,672px)]', |
| 15 |
'sm:[align-items:var(--ext-tpl-choice-align,stretch)]', |
| 16 |
].join(' '); |
| 17 |
|
| 18 |
// border-ui-line outranks border-ui-action in the built CSS. |
| 19 |
const BOX = [ |
| 20 |
CARD.replace('border-ui-line', ''), |
| 21 |
'flex flex-col overflow-hidden text-left text-ui-ink', |
| 22 |
'[border-width:var(--ext-tpl-choice-highlight-border,3px)]', |
| 23 |
].join(' '); |
| 24 |
|
| 25 |
const HIGHLIGHT = [ |
| 26 |
'border-ui-action', |
| 27 |
'sm:-mt-[var(--ext-tpl-choice-badge-height,28px)]', |
| 28 |
].join(' '); |
| 29 |
|
| 30 |
const ROWS = 'flex flex-1 flex-col [gap:var(--ext-tpl-choice-box-gap,0px)]'; |
| 31 |
|
| 32 |
const BADGE = [ |
| 33 |
'flex items-center justify-center bg-ui-action', |
| 34 |
'[height:var(--ext-tpl-choice-badge-height,28px)]', |
| 35 |
'text-ui-status font-ui-status text-ui-action-text', |
| 36 |
].join(' '); |
| 37 |
|
| 38 |
const ICON_STRIP = [ |
| 39 |
'flex items-center justify-center text-ui-ink', |
| 40 |
'[padding-block:var(--ext-tpl-choice-icon-pad,40px)]', |
| 41 |
].join(' '); |
| 42 |
|
| 43 |
const BODY = 'flex flex-1 flex-col justify-between gap-ui p-ui'; |
| 44 |
|
| 45 |
const COPY = 'flex flex-col [gap:var(--ext-tpl-choice-copy-gap,8px)]'; |
| 46 |
|
| 47 |
const BUTTON = [ |
| 48 |
'inline-flex w-full items-center justify-between gap-2 rounded-ui-button', |
| 49 |
'[padding:var(--ext-tpl-choice-button-pad,10px)_var(--ext-tpl-choice-button-pad-x,20px)]', |
| 50 |
'text-ui-body font-ui-body transition focus:outline-none', |
| 51 |
'focus-visible:ring-1 focus-visible:ring-ui-line', |
| 52 |
].join(' '); |
| 53 |
|
| 54 |
const Box = ({ |
| 55 |
icon, |
| 56 |
badgeLabel, |
| 57 |
heading, |
| 58 |
description, |
| 59 |
buttonLabel, |
| 60 |
buttonIcon = arrowRight, |
| 61 |
highlight, |
| 62 |
onClick, |
| 63 |
}) => ( |
| 64 |
<div className={classNames(BOX, highlight ? HIGHLIGHT : 'border-ui-line')}> |
| 65 |
{highlight && badgeLabel && <span className={BADGE}>{badgeLabel}</span>} |
| 66 |
<span className={ROWS}> |
| 67 |
<span className={ICON_STRIP}> |
| 68 |
<Icon fill="currentColor" icon={icon} size={40} /> |
| 69 |
</span> |
| 70 |
<span className={BODY}> |
| 71 |
<span className={COPY}> |
| 72 |
{heading && ( |
| 73 |
<span className="text-ui-body font-ui-heading font-ui-strong"> |
| 74 |
{heading} |
| 75 |
</span> |
| 76 |
)} |
| 77 |
<span className="text-ui-body opacity-70">{description}</span> |
| 78 |
</span> |
| 79 |
<button |
| 80 |
type="button" |
| 81 |
onClick={onClick} |
| 82 |
className={classNames( |
| 83 |
BUTTON, |
| 84 |
highlight |
| 85 |
? 'border-ui border-ui-action bg-ui-action text-ui-action-text hover:opacity-90' |
| 86 |
: 'border-ui border-ui-line bg-ui-secondary-fill text-ui-secondary-text', |
| 87 |
)} |
| 88 |
> |
| 89 |
{buttonLabel} |
| 90 |
<Icon fill="currentColor" icon={buttonIcon} size={20} /> |
| 91 |
</button> |
| 92 |
</span> |
| 93 |
</span> |
| 94 |
</div> |
| 95 |
); |
| 96 |
|
| 97 |
export const Page = ({ parts, has }) => ( |
| 98 |
<PageCanvas> |
| 99 |
<div className="w-full flex flex-col items-center gap-ui md:gap-ui-lg m-auto"> |
| 100 |
<div className="mb-ui-block">{parts.logo}</div> |
| 101 |
{has.heading && parts.heading} |
| 102 |
<div className={classNames(GRID, WIDE)}> |
| 103 |
{(parts.options ?? []).map(({ key, ...option }) => ( |
| 104 |
<Box key={key} {...option} /> |
| 105 |
))} |
| 106 |
</div> |
| 107 |
</div> |
| 108 |
{has.footer && <div className="w-full pt-8 shrink-0">{parts.footer}</div>} |
| 109 |
</PageCanvas> |
| 110 |
); |
| 111 |
|
