open-consul/website/components/case-study-carousel/case-study-slide.jsx

45 lines
1.3 KiB
React
Raw Normal View History

2020-04-24 21:46:02 +00:00
import InlineSvg from '@hashicorp/react-inline-svg'
import Image from '@hashicorp/react-image'
import Button from '@hashicorp/react-button'
import QuoteMarksIcon from './img/quote.svg?include'
export default function CaseStudySlide({
2020-05-07 02:59:26 +00:00
caseStudy: { person, quote, company, caseStudyURL },
2020-04-24 21:46:02 +00:00
}) {
return (
<blockquote className="g-grid-container case-slide">
<InlineSvg className="quotes" src={QuoteMarksIcon} />
<h4 className="case g-type-display-4">{quote}</h4>
<div className="case-content">
<div className="person-container">
<Image
className="person-photo"
url={person.photo}
aspectRatio={[1, 1]}
alt={`${person.firstName} ${person.lastName}`}
/>
<div className="person-name">
<h5 className="g-type-display-5">
{person.firstName} {person.lastName}
</h5>
<p>
{person.title}, {company.name}
</p>
</div>
</div>
<Image className="company-logo" url={company.logo} alt={company.name} />
</div>
<Button
title="Read more"
url={caseStudyURL}
theme={{
variant: 'tertiary',
2020-05-07 02:59:26 +00:00
brand: 'consul',
background: 'light',
2020-04-24 21:46:02 +00:00
}}
linkType="outbound"
/>
</blockquote>
)
}