lbry-desktop/ui/component/common/card.jsx

44 lines
1.2 KiB
React
Raw Normal View History

2019-09-26 18:07:11 +02:00
// @flow
import type { Node } from 'react';
import React from 'react';
import classnames from 'classnames';
import Icon from 'component/common/icon';
type Props = {
2019-09-27 20:56:15 +02:00
title?: string | Node,
2019-09-26 18:07:11 +02:00
subtitle?: string | Node,
body?: string | Node,
actions?: string | Node,
icon?: string,
2019-11-22 22:13:00 +01:00
className?: string,
actionIconPadding?: boolean,
2019-09-26 18:07:11 +02:00
};
export default function Card(props: Props) {
2019-11-22 22:13:00 +01:00
const { title, subtitle, body, actions, icon, className, actionIconPadding = true } = props;
2019-09-26 18:07:11 +02:00
return (
2019-11-22 22:13:00 +01:00
<section className={classnames(className, 'card')}>
2019-09-27 20:56:15 +02:00
{title && (
<div className="card__header">
<div className="section__flex">
{icon && <Icon sectionIcon icon={icon} />}
<div>
<h2 className="section__title">{title}</h2>
2019-11-22 22:13:00 +01:00
{subtitle && <div className="section__subtitle">{subtitle}</div>}
2019-09-27 20:56:15 +02:00
</div>
2019-09-26 18:07:11 +02:00
</div>
</div>
2019-09-27 20:56:15 +02:00
)}
2019-09-26 18:07:11 +02:00
{body && <div className={classnames('card__body', { 'card__body--with-icon': icon })}>{body}</div>}
{actions && (
2019-11-22 22:13:00 +01:00
<div
className={classnames('card__main-actions', { 'card__main-actions--with-icon': icon && actionIconPadding })}
>
{actions}
</div>
2019-09-26 18:07:11 +02:00
)}
</section>
);
}