tj-sga-website-react/src/components/Segment.tsx
2021-01-07 09:59:56 -05:00

29 lines
600 B
TypeScript

import '../css/segment.css';
import BlueButtonLink from './BlueButtonLink';
function SegmentHeader({ children }: { children: React.ReactNode }) {
return (
<h3
style={{
margin: '1em 0px',
fontSize: '1.75rem',
fontWeight: 500,
}}
>
{children}
</h3>
);
}
export default function Segment({ title, content, imageUrl, infoUrl }) {
return (
<div className='segment'>
<SegmentHeader>{title}</SegmentHeader>
<img src={imageUrl} alt={title} />
<p className='strong-paragraph'>{content}</p>
<BlueButtonLink href={infoUrl}>MORE INFO</BlueButtonLink>
</div>
);
}