forked from mrzachnugent/react-native-reusables
-
Notifications
You must be signed in to change notification settings - Fork 0
/
alert.tsx
95 lines (90 loc) · 2.26 KB
/
alert.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import { useTheme } from '@react-navigation/native';
import { cva, type VariantProps } from 'class-variance-authority';
import * as LucideIcon from 'lucide-react-native';
import * as React from 'react';
import { Text, View } from 'react-native';
import { cn } from '~/lib/utils';
const alertVariants = cva(
'relative bg-background w-full rounded-lg border border-border p-4 shadow shadow-foreground/10',
{
variants: {
variant: {
default: '',
destructive: 'border-destructive',
},
},
defaultVariants: {
variant: 'default',
},
}
);
const Alert = React.forwardRef<
React.ElementRef<typeof View>,
React.ComponentPropsWithoutRef<typeof View> &
VariantProps<typeof alertVariants> & {
icon: keyof typeof LucideIcon;
iconSize?: number;
iconClassName?: string;
}
>(
(
{
className,
variant,
children,
icon,
iconSize = 16,
iconClassName,
...props
},
ref
) => {
const { colors } = useTheme();
const Icon = LucideIcon[icon] as LucideIcon.LucideIcon;
return (
<View
ref={ref}
role='alert'
className={alertVariants({ variant, className })}
{...props}
>
<View className='absolute left-3.5 top-4 -translate-y-0.5'>
<Icon
size={iconSize}
color={
variant === 'destructive' ? colors.notification : colors.text
}
/>
</View>
{children}
</View>
);
}
);
Alert.displayName = 'Alert';
const AlertTitle = React.forwardRef<
React.ElementRef<typeof Text>,
React.ComponentPropsWithoutRef<typeof Text>
>(({ className, ...props }, ref) => (
<Text
ref={ref}
className={cn(
'pl-7 mb-1 font-medium text-base leading-none tracking-tight text-foreground',
className
)}
{...props}
/>
));
AlertTitle.displayName = 'AlertTitle';
const AlertDescription = React.forwardRef<
React.ElementRef<typeof Text>,
React.ComponentPropsWithoutRef<typeof Text>
>(({ className, ...props }, ref) => (
<Text
ref={ref}
className={cn('pl-7 text-sm leading-relaxed text-foreground', className)}
{...props}
/>
));
AlertDescription.displayName = 'AlertDescription';
export { Alert, AlertDescription, AlertTitle };