Alert

1import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
2import type { ComponentType, ReactNode } from "react";
3import { cn } from "@/lib/utils";
4import { glass } from "@/lib/glass";
5 
6type AlertVariant = "default" | "destructive" | "success" | "warning";
7 
8const variantConfig: Record<
9  AlertVariant,
10  { icon: ComponentType<{ className?: string }>; accent: string }
11> = {
12  default: { icon: Info, accent: "text-[#007AFF]" },
13  destructive: { icon: CircleAlert, accent: "text-[#FF3B30]" },
14  success: { icon: CircleCheck, accent: "text-[#34C759]" },
15  warning: { icon: TriangleAlert, accent: "text-[#FF9500]" },
16};
17 
18interface AlertProps {
19  children: ReactNode;
20  variant?: AlertVariant;
21  className?: string;
22  /** Custom leading icon. Pass `null` to hide the icon entirely. */
23  icon?: ReactNode;
24}
25 
26export function Alert({
27  children,
28  variant = "default",
29  className = "",
30  icon,
31}: AlertProps) {
32  const { icon: DefaultIcon, accent } = variantConfig[variant];
33  const showIcon = icon !== null;
34 
35  return (
36    <div
37      role="alert"
38      data-variant={variant}
39      className={cn(glass, "flex items-start gap-3 p-4", className)}
40    >
41      {showIcon && (
42        <span className={cn("mt-0.5 shrink-0 [&_svg]:size-5", accent)}>
43          {icon ?? <DefaultIcon />}
44        </span>
45      )}
46      <div className="flex min-w-0 flex-col gap-1">{children}</div>
47    </div>
48  );
49}
50 
51interface AlertTitleProps {
52  children: ReactNode;
53  className?: string;
54}
55 
56export function AlertTitle({ children, className = "" }: AlertTitleProps) {
57  return (
58    <div className={cn("font-semibold leading-6 tracking-tight", className)}>
59      {children}
60    </div>
61  );
62}
63 
64interface AlertDescriptionProps {
65  children: ReactNode;
66  className?: string;
67}
68 
69export function AlertDescription({
70  children,
71  className = "",
72}: AlertDescriptionProps) {
73  return (
74    <div className={cn("text-sm leading-relaxed text-current/70", className)}>
75      {children}
76    </div>
77  );
78}