scratch-www/src/components/timeline-card/timeline-card.jsx
2021-10-15 12:47:58 -07:00

47 lines
1.3 KiB
JavaScript

const classNames = require('classnames');
const PropTypes = require('prop-types');
const React = require('react');
const VideoPreview = require('../video-preview/video-preview.jsx');
require('./timeline-card.scss');
const TimelineCard = props => (
<div className={classNames('timeline-card', props.className)}>
<a href={props.link}><img src="../../images/annual-report/2020/Symbols-UI/Open Link.svg" /></a>
<h5>{props.date}</h5>
<h4>{props.title}</h4>
<p>{props.text}</p>
{props.videoId &&
<VideoPreview
thumbnail={props.image}
thumbnailWidth="300"
videoHeight="216"
videoId={props.videoId}
videoWidth="380"
/>
}
{!props.videoId &&
<img
className="large"
src={props.image}
/>
}
{props.attribution &&
<p>{props.attribution}</p>
}
</div>
);
TimelineCard.propTypes = {
link: PropTypes.string,
date: PropTypes.string,
title: PropTypes.string,
text: PropTypes.string,
image: PropTypes.string,
videoId: PropTypes.string,
attribution: PropTypes.string,
className: PropTypes.string
};
module.exports = TimelineCard;