Alert

1import { cva, type VariantProps } from "class-variance-authority";
2import type { ReactNode } from "react";
3import { cn } from "@/lib/utils";
4import styles from "./alert.module.css";
5 
6const alertVariants = cva(styles.alert, {
7  variants: {
8    variant: {
9      default: styles.default,
10      destructive: styles.destructive,
11      warning: styles.warning,
12      success: styles.success,
13      info: styles.info,
14    },
15  },
16  defaultVariants: {
17    variant: "default",
18  },
19});
20 
21function DefaultAlertIcon() {
22  return (
23    <svg
24      aria-hidden="true"
25      fill="none"
26      height="16"
27      stroke="currentColor"
28      strokeLinecap="round"
29      strokeLinejoin="round"
30      strokeWidth="2"
31      viewBox="0 0 24 24"
32      width="16"
33      xmlns="http://www.w3.org/2000/svg"
34    >
35      <circle cx="12" cy="12" r="10" />
36      <path d="M12 16V11.5" />
37      <path d="M12 8.01172V8.00172" />
38    </svg>
39  );
40}
41 
42interface AlertProps extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {
43  icon?: ReactNode;
44}
45 
46function Alert({ className, variant, icon, children, ...props }: AlertProps) {
47  const filteredChildren = Array.isArray(children)
48    ? children.filter((child) => !(child && typeof child === "object" && "type" in child && child.type === "svg"))
49    : children;
50 
51  return (
52    <div className={cn(alertVariants({ variant }), className)} data-slot="alert" role="alert" {...props}>
53      <div className={styles.shadowRing} />
54      <div className={styles.notchBg} />
55      <div className={styles.notchBorder} />
56      <div className={styles.iconWrap}>{icon ?? <DefaultAlertIcon />}</div>
57      {filteredChildren}
58    </div>
59  );
60}
61 
62function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
63  return <div className={cn(styles.title, className)} data-slot="alert-title" {...props} />;
64}
65 
66function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
67  return <div className={cn(styles.description, className)} data-slot="alert-description" {...props} />;
68}
69 
70function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
71  return <div className={cn(styles.action, className)} data-slot="alert-action" {...props} />;
72}
73 
74export { Alert, AlertAction, AlertDescription, AlertTitle };