| 1 |
import classNames from 'classnames'; |
| 2 |
|
| 3 |
export const ModalHeading = ({ title }) => ( |
| 4 |
<h2 className="m-0 p-0 text-ui-heading font-ui-heading font-ui-strong tracking-ui-heading text-ui-ink"> |
| 5 |
{title} |
| 6 |
</h2> |
| 7 |
); |
| 8 |
|
| 9 |
export const ModalText = ({ children, strong }) => ( |
| 10 |
<p |
| 11 |
className={classNames( |
| 12 |
'm-0 text-ui-body leading-ui text-ui-ink', |
| 13 |
strong && 'font-medium', |
| 14 |
)} |
| 15 |
> |
| 16 |
{children} |
| 17 |
</p> |
| 18 |
); |
| 19 |
|
| 20 |
export const ModalLink = ({ label, href }) => ( |
| 21 |
<a |
| 22 |
className="text-ui-body font-medium leading-ui underline [color:var(--ext-tpl-modal-link,var(--color-ui-action))]" |
| 23 |
href={href} |
| 24 |
> |
| 25 |
{label} |
| 26 |
</a> |
| 27 |
); |
| 28 |
|
