| 1 |
/** |
| 2 |
* The three cards along the bottom. |
| 3 |
*/ |
| 4 |
|
| 5 |
import { __ } from "@wordpress/i18n"; |
| 6 |
import Icon from "./Icon"; |
| 7 |
import ProBadge from "./ProBadge"; |
| 8 |
|
| 9 |
export default function BuildCards({ cards }) { |
| 10 |
return ( |
| 11 |
<section className="subscrpt-build"> |
| 12 |
<h2 className="subscrpt-heading">{__("Build with WPSubscription", "subscription")}</h2> |
| 13 |
<p className="subscrpt-sub">{__("Everything you need to grow recurring revenue.", "subscription")}</p> |
| 14 |
|
| 15 |
<div className="subscrpt-build__grid"> |
| 16 |
{cards.map((card) => ( |
| 17 |
<a |
| 18 |
key={card.tone} |
| 19 |
className={`subscrpt-build__card is-${card.tone}`} |
| 20 |
href={card.link.url} |
| 21 |
target={card.link.external ? "_blank" : undefined} |
| 22 |
rel={card.link.external ? "noreferrer noopener" : undefined} |
| 23 |
> |
| 24 |
<span className="subscrpt-build__icon"> |
| 25 |
<Icon name={card.icon} size={18} /> |
| 26 |
</span> |
| 27 |
<span className="subscrpt-build__eyebrow"> |
| 28 |
{card.eyebrow} |
| 29 |
{/* A real space, so the card's name reads "Insight Pro" and not "InsightPro". */} |
| 30 |
{card.pro && " "} |
| 31 |
{card.pro && <ProBadge />} |
| 32 |
</span> |
| 33 |
<span className="subscrpt-build__title">{card.title}</span> |
| 34 |
<span className="subscrpt-build__text">{card.text}</span> |
| 35 |
<span className="subscrpt-build__link"> |
| 36 |
{card.link.label} |
| 37 |
{card.link.external ? <Icon name="external" size={12} /> : <span aria-hidden="true">→</span>} |
| 38 |
</span> |
| 39 |
</a> |
| 40 |
))} |
| 41 |
</div> |
| 42 |
</section> |
| 43 |
); |
| 44 |
} |
| 45 |
|
