| 1 |
import {Button} from './Button'; |
| 2 |
import {Card} from './Card'; |
| 3 |
import styles from './MustHaveAddonCard.module.css'; |
| 4 |
|
| 5 |
export const MustHaveAddonCard = ({name, description, icon, image, features, actionLink, actionText}) => ( |
| 6 |
<Card as="article" className={styles.card}> |
| 7 |
<div className={styles.header}> |
| 8 |
<img src={icon} alt="" /> |
| 9 |
<h3 className={styles.title}>{name}</h3> |
| 10 |
</div> |
| 11 |
<img className={styles.image} src={image} alt="" /> |
| 12 |
<p className={styles.description}>{description}</p> |
| 13 |
<ul className={styles.features}> |
| 14 |
{features.map((feature) => ( |
| 15 |
<li key={feature} className={styles.feature}> |
| 16 |
<svg className={styles.checkmark} viewBox="0 0 16 12" preserveAspectRatio="xMidYMid meet"> |
| 17 |
<use href="#give-in-plugin-upsells-checkmark" /> |
| 18 |
</svg> |
| 19 |
{feature} |
| 20 |
</li> |
| 21 |
))} |
| 22 |
</ul> |
| 23 |
<Button as="a" href={actionLink} rel="noopener" target="_blank" className={styles.button}> |
| 24 |
{actionText} |
| 25 |
</Button> |
| 26 |
</Card> |
| 27 |
); |
| 28 |
|
