55 lines
1.1 KiB
React
55 lines
1.1 KiB
React
|
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;
|