import Card , { CardProps } from "@material-ui/core/Card" ; import CardContent from "@material-ui/core/CardContent" ; import clsx from "clsx" ; import React from "react" ; import useStyles from "./styles" ; export type AlertVariant = "error" | "warning" | "success" | "info" ; export interface AlertBaseProps extends Omit < CardProps , "variant" > { className ? : string ; variant : AlertVariant ; } export const AlertBase = ( { className , variant = "info" , children , ... rest } ) => { const classes = useStyles ( ) ; return ( < Card elevation = { 0 } className = { clsx ( className , classes . root , { [ classes . error ] : variant === "error" , [ classes . warning ] : variant === "warning" , [ classes . success ] : variant === "success" } ) } data - test = "alert" { ... rest } > < CardContent > { children } < /CardContent> < /Card>); } ; AlertBase . displayName = "AlertBase" ;