30 lines
955 B
TypeScript
30 lines
955 B
TypeScript
import { useState } from 'react';
|
|
import { Dialog } from '../Dialog/Dialog';
|
|
|
|
type BackendStatus = 'checking' | 'unavailable';
|
|
|
|
interface BackendConnectionDialogProps {
|
|
backendStatus: BackendStatus;
|
|
message: string;
|
|
}
|
|
|
|
export function BackendConnectionDialog({ backendStatus, message }: BackendConnectionDialogProps) {
|
|
const [open, setOpen] = useState(true);
|
|
|
|
if (!open) return null;
|
|
|
|
const title = backendStatus === 'checking'
|
|
? 'Checking server connection'
|
|
: 'Backend is unreachable';
|
|
|
|
return <Dialog title={title} onClose={() => setOpen(false)} className="backend-connection-dialog">
|
|
<div className="backend-connection-dialog__content" role="status" aria-live="polite">
|
|
<div className="backend-connection-dialog__icon" aria-hidden="true">!</div>
|
|
<div>
|
|
<p>{message}</p>
|
|
<p className="backend-connection-dialog__hint">The connection is checked automatically.</p>
|
|
</div>
|
|
</div>
|
|
</Dialog>;
|
|
}
|