diff options
Diffstat (limited to 'components/ui/Button.tsx')
| -rw-r--r-- | components/ui/Button.tsx | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx new file mode 100644 index 00000000..069fe116 --- /dev/null +++ b/components/ui/Button.tsx @@ -0,0 +1,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 }; |
