mirror of
https://github.com/ente-io/ente.git
synced 2025-06-03 07:49:45 +00:00
7adb64f0f5
> Box component is not intended to be used with Figma, it's a specific implementation based on the underlying style engine we are using which might be removed once we switched to Pigment CSS (not related to design again). > > https://github.com/mui/material-ui/issues/43898#issuecomment-2482313907
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
|
import { 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,
|
|
}) => (
|
|
<Stack direction="row" sx={{ gap: "5px", alignItems: "center" }}>
|
|
<ErrorOutlineIcon sx={{ fontSize: "16px", color: "critical.main" }} />
|
|
<Typography variant="small" sx={{ color: "critical.main" }}>
|
|
{children ?? t("generic_error")}
|
|
</Typography>
|
|
</Stack>
|
|
);
|