Daniil
33 lines
885 B
TypeScript
33 lines
885 B
TypeScript
"use client"
|
|
|
|
import type { IAlertProps } from "./Alert.d"
|
|
import type { JSX } from "react"
|
|
|
|
import { Callout } from "@radix-ui/themes"
|
|
import { AlertCircle, CheckCircle, Info, TriangleAlert } from "lucide-react"
|
|
import { forwardRef } from "react"
|
|
|
|
const variantMap = {
|
|
info: { color: "blue", Icon: Info },
|
|
success: { color: "green", Icon: CheckCircle },
|
|
warning: { color: "yellow", Icon: TriangleAlert },
|
|
danger: { color: "red", Icon: AlertCircle },
|
|
} as const
|
|
|
|
export const Alert = forwardRef<HTMLDivElement, IAlertProps>(
|
|
({ variant = "info", children, ...props }, ref): JSX.Element => {
|
|
const { color, Icon } = variantMap[variant]
|
|
|
|
return (
|
|
<Callout.Root ref={ref} color={color} role="alert" {...props}>
|
|
<Callout.Icon>
|
|
<Icon size={16} />
|
|
</Callout.Icon>
|
|
<Callout.Text>{children}</Callout.Text>
|
|
</Callout.Root>
|
|
)
|
|
},
|
|
)
|
|
|
|
Alert.displayName = "Alert"
|