sharded-gotify/ui/src/common/ConnectionErrorBanner.tsx

28 lines
766 B
TypeScript

import React from 'react';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
interface ConnectionErrorBannerProps {
height: number;
retry: () => void;
message: string;
}
export const ConnectionErrorBanner = ({height, retry, message}: ConnectionErrorBannerProps) => (
<div
style={{
backgroundColor: '#e74c3c',
height,
width: '100%',
zIndex: 1300,
position: 'relative',
}}>
<Typography align="center" variant="h6" style={{lineHeight: `${height}px`}}>
{message}{' '}
<Button variant="outlined" onClick={retry}>
Retry
</Button>
</Typography>
</div>
);