import { MouseEvent } from "react"; import { Icon } from "react-feather"; import classNames from "@calcom/lib/classNames"; import Button from "./Button"; const stylesByVariant = { neutral: { background: "bg-gray-100 ", text: "!text-gray-800", hover: "hover:!bg-gray-200" }, warning: { background: "bg-orange-100 ", text: "!text-orange-800", hover: "hover:!bg-orange-200" }, error: { background: "bg-red-100 ", text: "!text-red-800", hover: "hover:!bg-red-200" }, }; export type BannerProps = { title: string; description?: string; variant: keyof typeof stylesByVariant; errorMessage?: string; Icon?: Icon; onDismiss: (event: MouseEvent) => void; onAction?: (event: MouseEvent) => void; actionText?: string; } & JSX.IntrinsicElements["div"]; const Banner = (props: BannerProps) => { const { variant, errorMessage, title, description, ...rest } = props; const buttonStyle = classNames(stylesByVariant[variant].text, stylesByVariant[variant].hover); return (
{props.Icon && }

{title}

{description &&

{description}

} {props.variant === "error" &&

{errorMessage}

}
{props.actionText && ( )}
); }; export default Banner;