AdditionalAddonCard.js
4 years ago
AdditionalAddonCard.module.css
4 years ago
AdditionalAddons.js
4 years ago
AdditionalAddons.module.css
4 years ago
AddonsAdminPage.js
4 years ago
AddonsAdminPage.module.css
4 years ago
Button.js
4 years ago
Button.module.css
4 years ago
Card.js
4 years ago
Card.module.css
4 years ago
Hero.js
4 years ago
Hero.module.css
4 years ago
MustHaveAddonCard.js
4 years ago
MustHaveAddonCard.module.css
4 years ago
MustHaveAddons.js
4 years ago
MustHaveAddons.module.css
4 years ago
PricingPlanCard.js
4 years ago
PricingPlanCard.module.css
4 years ago
PricingPlans.js
4 years ago
PricingPlans.module.css
4 years ago
RecurringDonationsTab.js
4 years ago
RecurringDonationsTab.module.scss
4 years ago
MustHaveAddonCard.js
28 lines
| 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 |