import { MouseEvent, useState } from "react"; import classNames from "@calcom/lib/classNames"; import { SVGComponent } from "@calcom/types/SVGComponent"; 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?: SVGComponent; onDismiss: (event: MouseEvent) => void; onAction?: (event: MouseEvent) => void; actionText?: string; } & JSX.IntrinsicElements["div"]; const Banner = (props: BannerProps) => { const { variant, errorMessage, title, description, className, Icon, ...rest } = props; const [show, setShow] = useState(true); if (!show) { return null; } return (
{Icon && }

{title}

{description &&

{description}

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

{errorMessage}

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