58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
import Button from '@hashicorp/react-button'
|
|
|
|
export default function LearnNomad({ headline, brand, items }) {
|
|
return (
|
|
<div className={`g-learn-callout brand-${brand ? brand : 'neutral'}`}>
|
|
<div className="g-grid-container learn-container">
|
|
<div className="column-container">
|
|
{/* need this wrapper to flex center the .column-content */}
|
|
<div>
|
|
<div className="column-content">
|
|
<h2 className="g-type-display-2">{headline}</h2>
|
|
<Button
|
|
className="desktop-button"
|
|
title="Explore HashiCorp Learn"
|
|
url={`https://learn.hashicorp.com/${brand}`}
|
|
linkType="outbound"
|
|
theme={{ variant: 'primary', brand }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{items.map((item) => {
|
|
return (
|
|
<a
|
|
key={item.title}
|
|
href={item.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<div className="course">
|
|
<div className="image">
|
|
<div className="g-type-label-strong time">{item.time}</div>
|
|
<img src={item.image} alt={item.title} />
|
|
</div>
|
|
<div className="content">
|
|
<div>
|
|
<label className="g-type-label-strong category">
|
|
{item.category}
|
|
</label>
|
|
<h4 className="g-type-display-4">{item.title}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
})}
|
|
</div>
|
|
<Button
|
|
className="mobile-button"
|
|
title="Explore HashiCorp Learn"
|
|
url={`https://learn.hashicorp.com/${brand}`}
|
|
linkType="outbound"
|
|
theme={{ variant: 'primary', brand }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|