33 lines
730 B
TypeScript

import { FormattedMessage } from 'react-intl';
import classes from './empty_state.module.scss';
/**
* Simple empty state component with a neutral default title and customisable message.
*
* Action buttons can be passed as `children`
*/
export const EmptyState: React.FC<{
title?: string | React.ReactElement;
message?: string | React.ReactElement;
children?: React.ReactNode;
}> = ({
title = (
<FormattedMessage id='empty_state.no_results' defaultMessage='No results' />
),
message,
children,
}) => {
return (
<div className={classes.wrapper}>
<div className={classes.content}>
<h3>{title}</h3>
{!!message && <p>{message}</p>}
</div>
{children}
</div>
);
};