RocketChat/Rocket.Chat

import { Box, States, StatesIcon, StatesTitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
import type { Keys as IconName } from '@rocket.chat/icons';
import { useTranslation } from '@rocket.chat/ui-contexts';
import React from 'react';

type GenericErrorProps = {
    icon?: IconName;
    title?: string;
    buttonTitle?: string;
    buttonAction?: () => void;
};

const GenericError = ({ icon = 'magnifier', title, buttonTitle, buttonAction }: GenericErrorProps) => {
    const t = useTranslation();

    return (
        <Box display='flex' height='100%' flexDirection='column' justifyContent='center'>
            <States>
                <StatesIcon name={icon} variation='danger' />
                <StatesTitle>{title || t('Something_went_wrong')}</StatesTitle>
                {buttonAction && (
                    <StatesActions>
                        <StatesAction onClick={buttonAction}>{buttonTitle || t('Reload_page')}</StatesAction>
                    </StatesActions>
                )}
            </States>
        </Box>
    );
};

export default GenericError;