mirror of
https://github.com/ente-io/ente.git
synced 2025-06-09 10:29:35 +00:00
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
|
import { Box, Stack, Typography } from "@mui/material";
|
|
import { t } from "i18next";
|
|
import type React from "react";
|
|
|
|
/**
|
|
* An error message indicator, styled to complement {@link ActivityIndicator}.
|
|
*
|
|
* If a child is provided, it is used as the error message to show (after being
|
|
* wrapped in a suitable {@link Typography}). Otherwise the default generic
|
|
* error message is shown.
|
|
*/
|
|
export const ActivityErrorIndicator: React.FC<React.PropsWithChildren> = ({
|
|
children,
|
|
}) => (
|
|
<Stack sx={{ gap: 2, alignItems: "center" }}>
|
|
<ErrorOutlineIcon color="secondary" />
|
|
<Typography sx={{ color: "text.muted" }}>
|
|
{children ?? t("generic_error")}
|
|
</Typography>
|
|
</Stack>
|
|
);
|
|
|
|
/**
|
|
* An smaller error message indicator suitable for being shown above or below
|
|
* text fields.
|
|
*
|
|
* If a child is provided, it is used as the error message to show (after being
|
|
* wrapped in a suitable {@link Typography}). Otherwise the default generic
|
|
* error message is shown.
|
|
*/
|
|
export const InlineErrorIndicator: React.FC<React.PropsWithChildren> = ({
|
|
children,
|
|
}) => (
|
|
<Box sx={{ display: "flex", gap: "5px", alignItems: "center" }}>
|
|
<ErrorOutlineIcon sx={{ fontSize: "16px", color: "critical.main" }} />
|
|
<Typography variant="small" sx={{ color: "critical.main" }}>
|
|
{children ?? t("generic_error")}
|
|
</Typography>
|
|
</Box>
|
|
);
|