Banner

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { ArrowRight, Info, Sparkles, TriangleAlert, X } from "lucide-react"
6import { cn } from "@/lib/utils"
7 
8const bannerVariants = cva(
9  "relative flex w-full items-center gap-3 border px-4 py-3 text-sm",
10  {
11    variants: {
12      variant: {
13        info: "border-transparent bg-muted text-foreground",
14        accent: "border-primary/30 bg-primary/10 text-foreground",
15        destructive: "border-transparent bg-destructive/10 text-destructive",
16      },
17    },
18    defaultVariants: { variant: "info" },
19  },
20)
21 
22type BannerVariant = NonNullable<VariantProps<typeof bannerVariants>["variant"]>
23 
24const DEFAULT_ICONS: Record<BannerVariant, React.ReactNode> = {
25  info: <Info className="size-4" />,
26  accent: <Sparkles className="size-4" />,
27  destructive: <TriangleAlert className="size-4" />,
28}
29 
30export interface BannerProps
31  extends React.HTMLAttributes<HTMLDivElement>,
32    VariantProps<typeof bannerVariants> {
33  /** Overrides the per-variant default icon; pass null to render no icon. */
34  icon?: React.ReactNode
35  /** Renders a real anchor with a trailing arrow — href stays middle-clickable. */
36  action?: { label: string; href: string }
37  /**
38   * When provided, a dismiss button (aria-label "Dismiss") appears. The banner
39   * never hides itself — visibility is consumer-owned (conditional render).
40   */
41  onDismiss?: () => void
42}
43 
44export const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
45  ({ variant, icon, action, onDismiss, className, children, ...props }, ref) => {
46    const resolved: BannerVariant = variant ?? "info"
47 
48    return (
49      <div
50        className={cn(bannerVariants({ variant: resolved }), className)}
51        ref={ref}
52        role={resolved === "destructive" ? "alert" : "status"}
53        {...props}
54      >
55        {icon !== null && (
56          <span
57            aria-hidden="true"
58            className={cn("shrink-0", resolved === "accent" && "text-primary")}
59          >
60            {icon === undefined ? DEFAULT_ICONS[resolved] : icon}
61          </span>
62        )}
63 
64        <span className="min-w-0 flex-1">{children}</span>
65 
66        {action && (
67          <a
68            className={cn(
69              "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-sm font-medium underline-offset-4 hover:underline",
70              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
71// … truncated