49 lines
1.7 KiB
React
49 lines
1.7 KiB
React
|
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>
|
||
|
|
)
|
||
|
|
}
|