Alert

1import * as React from "react";
2import { View, Text } from "react-native";
3import { cva, type VariantProps } from "class-variance-authority";
4 
5import { cn } from "@/lib/utils";
6 
7const alertVariants = cva("w-full rounded-xl border p-4 mb-4", {
8  variants: {
9    variant: {
10      default: "bg-background border-input",
11      destructive:
12        "border-destructive/50 bg-destructive/10 text-destructive dark:border-destructive",
13      success:
14        "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-500 dark:border-green-500",
15      warning:
16        "border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-500 dark:border-yellow-500",
17      info: "border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-500 dark:border-blue-500",
18    },
19  },
20  defaultVariants: {
21    variant: "default",
22  },
23});
24 
25interface AlertProps
26  extends React.ComponentPropsWithoutRef<typeof View>,
27  VariantProps<typeof alertVariants> {
28  icon?: React.ReactNode;
29}
30 
31function Alert({ className, variant, icon, children, ...props }: AlertProps) {
32  return (
33    <View
34      className={cn(alertVariants({ variant }), className)}
35      accessibilityRole="alert"
36      {...props}
37    >
38      {icon && <View className="mb-2">{icon}</View>}
39      <View className={cn(icon ? "pl-0" : "pl-0")}>{children}</View>
40    </View>
41  );
42}
43 
44interface AlertTitleProps extends React.ComponentPropsWithoutRef<typeof Text> { }
45 
46function AlertTitle({ className, ...props }: AlertTitleProps) {
47  return (
48    <Text
49      className={cn(
50        "text-lg font-semibold leading-none tracking-tight text-foreground mb-2",
51        className
52      )}
53      {...props}
54    />
55  );
56}
57 
58interface AlertDescriptionProps
59  extends React.ComponentPropsWithoutRef<typeof Text> { }
60 
61function AlertDescription({ className, ...props }: AlertDescriptionProps) {
62  return (
63    <Text
64      className={cn("text-base text-foreground opacity-90", className)}
65      {...props}
66    />
67  );
68}
69 
70export {
71  Alert,
72  AlertTitle,
73  AlertDescription,
74  type AlertProps,
75  type AlertTitleProps,
76  type AlertDescriptionProps,
77};