lbry-desktop/ui/component/yrbl/index.jsx
2020-09-29 17:12:32 -04:00

45 lines
1 KiB
JavaScript

// @flow
import type { Node } from 'react';
import * as React from 'react';
import classnames from 'classnames';
import { YRBL_HAPPY_IMG_URL, YRBL_SAD_IMG_URL } from 'config';
type Props = {
title?: string,
subtitle?: string | React.Node,
type: string,
className?: string,
actions?: Node,
};
const yrblTypes = {
happy: YRBL_HAPPY_IMG_URL,
sad: YRBL_SAD_IMG_URL,
};
export default class extends React.PureComponent<Props> {
static defaultProps = {
type: 'happy',
};
render() {
const { title, subtitle, type, className, actions } = this.props;
const image = yrblTypes[type];
return (
<div className="yrbl__wrap">
<img alt="Friendly gerbil" className={classnames('yrbl', className)} src={`${image}`} />
<div>
{(title || subtitle) && (
<div className="yrbl__content">
<h2 className="section__title">{title}</h2>
<p className="section__subtitle">{subtitle}</p>
</div>
)}
{actions}
</div>
</div>
);
}
}