Files
edr-platform/apps/edr-hr-web/src/shared/components/ApiErrorAlert.tsx
2026-08-25 00:11:39 +03:00

32 lines
784 B
TypeScript

import { Alert } from "@mantine/core";
import { IconAlertTriangle } from "@tabler/icons-react";
import { apiErrorMessage } from "@/auth/http";
/**
* Surfaces the SERVER's message rather than "Request failed with status code
* NNN" — the API's validation and conflict errors say exactly what is wrong
* ("Employee number EMP-00007 is already in use"), and that is what the user
* needs to see.
*/
export function ApiErrorAlert({
error,
title = "Something went wrong",
}: {
error: unknown;
title?: string;
}) {
if (!error) return null;
return (
<Alert
color="red"
icon={<IconAlertTriangle size={18} />}
title={title}
mb="md"
styles={{ message: { whiteSpace: "pre-line" } }}
>
{apiErrorMessage(error)}
</Alert>
);
}