mirror of
https://github.com/ente-io/ente.git
synced 2025-06-14 04:28:53 +00:00
b94332aaa7
npx @mui/codemod@latest deprecations/all `git ls-files '**.tsx'` ; npx @mui/codemod@latest v6.0.0/styled `git ls-files '**.tsx'` ; npx @mui/codemod@latest v6.0.0/sx-prop `git ls-files '**.tsx'` ; npx @mui/codemod@latest v6.0.0/system-props `git ls-files '**.tsx'`
41 lines
1.5 KiB
TypeScript
41 lines
1.5 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" sx={{ color: "critical" }} />
|
|
<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>
|
|
);
|