spb/fetcha

1import * as React from "react";2import { AlertTriangle, CheckCircle2, Info, XCircle } from "lucide-react";3import { cn } from "@/lib/utils";45export function Alert({ variant = "info", title, children, className, action }: { variant?: "info" | "success" | "warning" | "danger"; title?: React.ReactNode; children?: React.ReactNode; className?: string; action?: React.ReactNode }) {6  const Icon = variant === "success" ? CheckCircle2 : variant === "warning" ? AlertTriangle : variant === "danger" ? XCircle : Info;7  return (8    <div9      role={variant === "danger" ? "alert" : "status"}10      className={cn(11        "flex items-start gap-3 rounded-lg border px-4 py-3 text-[13.5px] leading-relaxed",12        variant === "info" && "border-info/20 bg-info-soft text-fg",13        variant === "success" && "border-success/20 bg-success-soft text-fg",14        variant === "warning" && "border-warning/25 bg-warning-soft text-fg",15        variant === "danger" && "border-danger/25 bg-danger-soft text-fg",16        className,17      )}18    >19      <Icon className={cn("mt-0.5 size-4 shrink-0", variant === "info" && "text-info", variant === "success" && "text-success", variant === "warning" && "text-warning", variant === "danger" && "text-danger")} aria-hidden />20      <div className="min-w-0 flex-1">21        {title ? <div className="font-medium">{title}</div> : null}22        {children ? <div className={cn(title && "mt-0.5 text-fg-muted")}>{children}</div> : null}23      </div>24      {action ? <div className="shrink-0">{action}</div> : null}25    </div>26  );27}28