99ab165a8f
Clearer display of takeover amounts Repost from empty search result, from top page, or from claim review changes final touches bump empty comment copy they emptier validation cleanup extra
54 lines
1.2 KiB
JavaScript
54 lines
1.2 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,
|
|
alwaysShow?: boolean,
|
|
small: boolean,
|
|
};
|
|
|
|
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, small, alwaysShow = false } = this.props;
|
|
|
|
const image = yrblTypes[type];
|
|
|
|
return (
|
|
<div className="yrbl__wrap">
|
|
<img
|
|
alt="Friendly gerbil"
|
|
className={classnames(small ? 'yrbl--small' : 'yrbl', className, {
|
|
'yrbl--always-show': alwaysShow,
|
|
})}
|
|
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>
|
|
);
|
|
}
|
|
}
|