mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-01-01 10:18:35 -05:00
47 lines
1.3 KiB
JavaScript
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;
|