9758c59f64
Port 8da2fae6ccd50158171a7caa52a809da2e146c26 to glitch-soc Co-authored-by: diondiondion <mail@diondiondion.com> Signed-off-by: Claire <claire.github-309c@sitedethib.com>
38 lines
830 B
TypeScript
38 lines
830 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<{
|
|
image?: React.ReactNode;
|
|
title?: React.ReactNode;
|
|
message?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
}> = ({
|
|
image,
|
|
title = (
|
|
<FormattedMessage id='empty_state.no_results' defaultMessage='No results' />
|
|
),
|
|
message,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<div className={classes.wrapper}>
|
|
{(title || message || image) && (
|
|
<div className={classes.content}>
|
|
{image}
|
|
{!!title && <h3>{title}</h3>}
|
|
{!!message && <p>{message}</p>}
|
|
</div>
|
|
)}
|
|
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|