open-consul/website/components/enterprise-comparison/index.jsx

63 lines
1.9 KiB
React
Raw Normal View History

2020-04-24 18:52:30 +00:00
import Image from '@hashicorp/react-image'
import Button from '@hashicorp/react-button'
import InlineSvg from '@hashicorp/react-inline-svg'
import ArrowIcon from './img/arrow.svg?include'
export default function EnterpriseComparison({
title,
itemOne,
itemTwo,
brand,
}) {
2020-04-24 18:52:30 +00:00
return (
<div className="g-enterprise-comparison">
<div className="g-grid-container">
<h2 className="g-type-display-2">{title}</h2>
<div className="content-container">
<div className="item">
<Image url={itemOne.imageUrl} />
<div className="g-type-label-strong">{itemOne.label}</div>
<h4 className="g-type-display-4">{itemOne.title}</h4>
<p className="g-type-body">{itemOne.description}</p>
{itemOne.links.map((link) => (
<div key="stable">
<Button
url={link.url}
title={link.text}
linkType={link.type}
theme={{ variant: 'tertiary', brand }}
/>
</div>
))}
2020-04-24 18:52:30 +00:00
</div>
<div className="spacer">
<div className="vertical-spacer"></div>
<InlineSvg className="arrow" src={ArrowIcon} />
</div>
<div className="item">
<Image url={itemTwo.imageUrl} />
<div className="g-type-label-strong">{itemTwo.label}</div>
<h4 className="g-type-display-4">{itemTwo.title}</h4>
<p className="g-type-body">{itemTwo.description}</p>
{itemTwo.links.map((link) => (
<div key="stable">
<Button
key="stable"
url={link.url}
title={link.text}
linkType={link.type}
theme={{ variant: 'tertiary', brand }}
/>
</div>
))}
2020-04-24 18:52:30 +00:00
</div>
</div>
</div>
</div>
)
}