Alert

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

export default function Example() {
  return <Alert />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const alertVariants = {
  default: "bg-background text-foreground border",
  destructive: "border-destructive/50 text-destructive dark:border-destructive bg-destructive/10",
  success: "border-green-500/50 text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-950",
  warning: "border-yellow-500/50 text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-950",
  info: "border-blue-500/50 text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-950",
};

const Alert = forwardRef(({ className, variant = "default", ...props }, ref) => (
  <div ref={ref} role="alert" className={cn("relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7", alertVariants[variant], className)} {...props} />
));
Alert.displayName = "Alert";

const AlertTitle = forwardRef(({ className, ...props }, ref) => (
  <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
));
AlertTitle.displayName = "AlertTitle";

const AlertDescription = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
));
AlertDescription.displayName = "AlertDescription";

export { Alert, AlertTitle, AlertDescription };