banner-info

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import {
4  Sparkles,
5  Info,
6  TriangleAlert,
7  CircleCheck,
8} from "lucide-react"
9 
10import { cn } from "@/lib/utils"
11import "./banner-info.css"
12 
13const bannerInfoVariants = cva(
14  "flex items-start gap-[var(--layout-gap-md)] rounded-[var(--layout-radius-xl)] p-[var(--layout-padding-lg)] text-content-note [&_svg]:shrink-0 [&_svg]:h-[var(--layout-size-sm)] [&_svg]:w-[var(--layout-size-sm)]",
15  {
16    variants: {
17      variant: {
18        brand: "banner-info-brand",
19        neutral: "banner-info-neutral",
20        danger: "banner-info-danger",
21        success: "banner-info-success",
22        warning: "banner-info-warning",
23      },
24    },
25    defaultVariants: {
26      variant: "neutral",
27    },
28  }
29)
30 
31const variantIcons = {
32  brand: Sparkles,
33  neutral: Info,
34  danger: TriangleAlert,
35  success: CircleCheck,
36  warning: TriangleAlert,
37} as const
38 
39function BannerInfo({
40  className,
41  variant = "neutral",
42  withIcon = true,
43  children,
44  ...props
45}: React.ComponentProps<"div"> &
46  VariantProps<typeof bannerInfoVariants> & {
47    withIcon?: boolean
48  }) {
49  const Icon = variant ? variantIcons[variant] : variantIcons.neutral
50 
51  return (
52    <div
53      data-slot="banner-info"
54      role="status"
55      className={cn(bannerInfoVariants({ variant, className }))}
56      {...props}
57    >
58      {withIcon && <Icon aria-hidden="true" />}
59      <div className="flex-1 min-w-0">{children}</div>
60    </div>
61  )
62}
63 
64export { BannerInfo, bannerInfoVariants }