forked from Archives/Athou_commafeed
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { Trans } from "@lingui/macro"
|
|
import { Box, Alert as MantineAlert } from "@mantine/core"
|
|
import { Fragment } from "react"
|
|
import { TbAlertCircle, TbAlertTriangle, TbCircleCheck } from "react-icons/tb"
|
|
|
|
type Level = "error" | "warning" | "success"
|
|
export interface ErrorsAlertProps {
|
|
level?: Level
|
|
messages: string[]
|
|
}
|
|
|
|
export function Alert(props: ErrorsAlertProps) {
|
|
let title: React.ReactNode
|
|
let color: string
|
|
let icon: React.ReactNode
|
|
|
|
const level = props.level ?? "error"
|
|
switch (level) {
|
|
case "error":
|
|
title = <Trans>Error</Trans>
|
|
color = "red"
|
|
icon = <TbAlertCircle />
|
|
break
|
|
case "warning":
|
|
title = <Trans>Warning</Trans>
|
|
color = "orange"
|
|
icon = <TbAlertTriangle />
|
|
break
|
|
case "success":
|
|
title = <Trans>Success</Trans>
|
|
color = "green"
|
|
icon = <TbCircleCheck />
|
|
break
|
|
default:
|
|
throw Error(`unsupported level: ${level}`)
|
|
}
|
|
|
|
return (
|
|
<MantineAlert title={title} color={color} icon={icon}>
|
|
{props.messages.map((m, i) => (
|
|
<Fragment key={m}>
|
|
<Box>{m}</Box>
|
|
{i !== props.messages.length - 1 && <br />}
|
|
</Fragment>
|
|
))}
|
|
</MantineAlert>
|
|
)
|
|
}
|