-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
index.jsx
46 lines (45 loc) · 1.25 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import styles from './HCPCalloutSection.module.css'
import Button from '@hashicorp/react-button'
export default function HcpCalloutSection({
id,
header,
title,
description,
chin,
image,
links,
}) {
return (
<div className={styles.hcpCalloutSection} id={id}>
{header ? (
<div className={styles.header}>
<h2>{header}</h2>
</div>
) : null}
<div className={styles.content}>
<div className={styles.info}>
<h1>{title}</h1>
<span className={styles.chin}>{chin}</span>
<p className={styles.description}>{description}</p>
<div className={styles.links}>
{links.map((link, index) => {
const variant = index === 0 ? 'primary' : 'tertiary'
return (
<div key={link.text}>
<Button
title={link.text}
label="Learn more — HCP Vault"
linkType={link.type}
url={link.url}
theme={{ variant, brand: 'neutral', background: 'light' }}
/>
</div>
)
})}
</div>
</div>
<img alt={title} src={image} />
</div>
</div>
)
}