diff options
| author | MohamedBassem <me@mbassem.com> | 2024-03-11 01:37:42 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2024-03-11 01:37:42 +0000 |
| commit | 1f3a162fde79dbf9102d2e3f67cfc6b6e2e302e9 (patch) | |
| tree | ac584f3d4145c06336b16d4da16d55e4478b123b /packages/mobile/components/ui/Button.tsx | |
| parent | f076adce152575eb21558acdb7ee729f6c55a8e8 (diff) | |
| parent | 2b720405ae3a19ac78fbf3e7231394364ba83c99 (diff) | |
| download | karakeep-1f3a162fde79dbf9102d2e3f67cfc6b6e2e302e9.tar.zst | |
mobile: Merge mobile repo into main repo
Diffstat (limited to 'packages/mobile/components/ui/Button.tsx')
| -rw-r--r-- | packages/mobile/components/ui/Button.tsx | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/packages/mobile/components/ui/Button.tsx b/packages/mobile/components/ui/Button.tsx new file mode 100644 index 00000000..4c3cbc69 --- /dev/null +++ b/packages/mobile/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 }; |
