cesnimda
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import React from "react";
|
|
|
|
import { Alert, Box, Button, CircularProgress, Typography } from "@mui/material";
|
|
|
|
import type { ViewResourceError } from "../hooks/useViewResource";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
type Props = {
|
|
loading?: boolean;
|
|
error?: ViewResourceError | null;
|
|
title: string;
|
|
description?: string;
|
|
retryLabel?: string;
|
|
onRetry?: () => void | Promise<void>;
|
|
compact?: boolean;
|
|
};
|
|
|
|
export default function ViewStateNotice({ loading = false, error = null, title, description, retryLabel, onRetry, compact = false }: Props) {
|
|
const { t } = useI18n();
|
|
const resolvedRetryLabel = retryLabel ?? t("retry");
|
|
|
|
if (loading) {
|
|
return (
|
|
<Box role="status" aria-live="polite" sx={{ py: compact ? 3 : 6, display: "flex", justifyContent: "center" }}>
|
|
<CircularProgress size={compact ? 24 : 28} aria-label={t("loading")} />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (!error) return null;
|
|
|
|
const severity = error.kind === "unauthorized" ? "warning" : error.kind === "unavailable" ? "error" : "error";
|
|
const detail = error.message !== title && error.message !== description ? error.message : null;
|
|
|
|
return (
|
|
<Alert
|
|
severity={severity}
|
|
sx={{
|
|
mb: compact ? 1.5 : 2,
|
|
alignItems: "flex-start",
|
|
borderRadius: 3,
|
|
}}
|
|
action={error.retryable && onRetry ? <Button color="inherit" size="small" onClick={() => void onRetry()}>{resolvedRetryLabel}</Button> : undefined}
|
|
>
|
|
<Typography sx={{ fontWeight: 800, mb: 0.35 }}>{title}</Typography>
|
|
{description ? <Typography variant="body2">{description}</Typography> : null}
|
|
{detail ? <Typography variant="body2" sx={{ mt: 0.5 }}>{detail}</Typography> : null}
|
|
</Alert>
|
|
);
|
|
}
|