open-consul/website/components/callout-blade/index.jsx

49 lines
1.7 KiB
JavaScript

import classNames from 'classnames'
import styles from './CalloutBlade.module.css'
import Button from '@hashicorp/react-button'
import InlineSvg from '@hashicorp/react-inline-svg'
export default function CalloutBlade({ title, callouts }) {
return (
<div className={styles.calloutBlade}>
<div className={styles.contentWrapper}>
<h3>{title}</h3>
<ul
className={classNames(styles.callouts, {
[styles.twoUp]: callouts.length % 3 !== 0,
[styles.threeUp]: callouts.length % 3 === 0,
})}
>
{callouts.map((callout) => {
return (
<li key={callout.title}>
<a className={styles.linkWrap} href={callout.link.url}>
<InlineSvg src={callout.icon} className={styles.icon} />
<div className={styles.flexWrapper}>
<div className={styles.infoWrapper}>
<h5>{callout.title}</h5>
<p>{callout.description}</p>
</div>
<div className={styles.linkWrapper}>
<div className={styles.eyebrow}>{callout.eyebrow}</div>
<Button
title={callout.link.text}
url={callout.link.url}
linkType="inbound"
theme={{
brand: 'neutral',
variant: 'tertiary',
}}
/>
</div>
</div>
</a>
</li>
)
})}
</ul>
</div>
</div>
)
}