49 lines
1 KiB
JavaScript
49 lines
1 KiB
JavaScript
import React from 'react';
|
|
|
|
class CardMedia extends React.PureComponent {
|
|
static AUTO_THUMB_CLASSES = [
|
|
'purple',
|
|
'red',
|
|
'pink',
|
|
'indigo',
|
|
'blue',
|
|
'light-blue',
|
|
'cyan',
|
|
'teal',
|
|
'green',
|
|
'yellow',
|
|
'orange',
|
|
];
|
|
|
|
componentWillMount() {
|
|
this.setState({
|
|
autoThumbClass:
|
|
CardMedia.AUTO_THUMB_CLASSES[
|
|
Math.floor(Math.random() * CardMedia.AUTO_THUMB_CLASSES.length)
|
|
],
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { title, thumbnail } = this.props;
|
|
const atClass = this.state.autoThumbClass;
|
|
|
|
if (thumbnail) {
|
|
return <div className="card__media" style={{ backgroundImage: `url('${thumbnail}')` }} />;
|
|
}
|
|
|
|
return (
|
|
<div className={`card__media card__media--autothumb ${atClass}`}>
|
|
<div className="card__autothumb__text">
|
|
{title &&
|
|
title
|
|
.replace(/\s+/g, '')
|
|
.substring(0, Math.min(title.replace(' ', '').length, 5))
|
|
.toUpperCase()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CardMedia;
|