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
|
import { type VariantProps, cva } from "class-variance-authority";
import { Text, TouchableOpacity } from "react-native";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"flex flex-row items-center justify-center rounded-md",
{
variants: {
variant: {
default: "bg-primary",
secondary: "bg-secondary",
destructive: "bg-destructive",
ghost: "bg-slate-700",
link: "text-primary underline-offset-4",
},
size: {
default: "h-10 px-4",
sm: "h-8 px-2",
lg: "h-12 px-8",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
const buttonTextVariants = cva("text-center font-medium", {
variants: {
variant: {
default: "text-primary-foreground",
secondary: "text-secondary-foreground",
destructive: "text-destructive-foreground",
ghost: "text-primary-foreground",
link: "text-primary-foreground underline",
},
size: {
default: "text-base",
sm: "text-sm",
lg: "text-xl",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});
interface ButtonProps
extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
VariantProps<typeof buttonVariants> {
label: string;
labelClasses?: string;
}
function Button({
label,
labelClasses,
className,
variant,
size,
...props
}: ButtonProps) {
return (
<TouchableOpacity
className={cn(buttonVariants({ variant, size, className }))}
{...props}
>
<Text
className={cn(
buttonTextVariants({ variant, size, className: labelClasses }),
)}
>
{label}
</Text>
</TouchableOpacity>
);
}
export { Button, buttonVariants, buttonTextVariants };
|
