import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { X } from "lucide-react" const bannerVariants = cva( "relative w-full", { variants: { variant: { default: "bg-background border border-border", muted: "dark bg-muted", border: "border-b border-border", }, size: { sm: "px-4 py-2", default: "px-4 py-3", lg: "px-4 py-3 md:py-2", }, rounded: { none: "", default: "rounded-lg", } }, defaultVariants: { variant: "default", size: "default", rounded: "none", } } ) interface BannerProps extends React.HTMLAttributes, VariantProps { icon?: React.ReactNode action?: React.ReactNode onClose?: () => void isClosable?: boolean layout?: "row" | "center" | "complex" } const Banner = React.forwardRef( ({ className, variant, size, rounded, icon, action, onClose, isClosable, layout = "row", children, ...props }, ref) => { const innerContent = (

{layout === "complex" ? (

{icon && (

{icon}

)}

{children}

) : ( <> {icon && (

{icon}

)}

{children}

)} {(action || isClosable) && (

{action} {isClosable && ( )}

)}

) return (

{innerContent}

) } ) Banner.displayName = "Banner" export { Banner, type BannerProps }