Banner

import { Banner } from "@/components/ui/banner";

export default function Example() {
  return <Banner />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Banner = forwardRef(({ className, variant = "default", onClose, children, ...props }, ref) => (
  <div ref={ref} role="banner"
    className={cn("flex items-center justify-between gap-4 px-4 py-3 text-sm",
      variant === "default" && "bg-primary text-primary-foreground",
      variant === "warning" && "bg-yellow-500 text-white",
      variant === "destructive" && "bg-destructive text-destructive-foreground",
      variant === "info" && "bg-blue-500 text-white",
      variant === "success" && "bg-green-500 text-white",
      className
    )}
    {...props}
  >
    <div className="flex-1">{children}</div>
    {onClose && (
      <button onClick={onClose} className="shrink-0 rounded-sm opacity-70 hover:opacity-100">
        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
      </button>
    )}
  </div>
));
Banner.displayName = "Banner";

export { Banner };