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 | |
| parent | f076adce152575eb21558acdb7ee729f6c55a8e8 (diff) | |
| parent | 2b720405ae3a19ac78fbf3e7231394364ba83c99 (diff) | |
| download | karakeep-1f3a162fde79dbf9102d2e3f67cfc6b6e2e302e9.tar.zst | |
mobile: Merge mobile repo into main repo
Diffstat (limited to 'packages/mobile/components')
| -rw-r--r-- | packages/mobile/components/Logo.tsx | 11 | ||||
| -rw-r--r-- | packages/mobile/components/ui/Button.tsx | 81 | ||||
| -rw-r--r-- | packages/mobile/components/ui/Input.tsx | 28 |
3 files changed, 120 insertions, 0 deletions
diff --git a/packages/mobile/components/Logo.tsx b/packages/mobile/components/Logo.tsx new file mode 100644 index 00000000..a15d8561 --- /dev/null +++ b/packages/mobile/components/Logo.tsx @@ -0,0 +1,11 @@ +import { PackageOpen } from "lucide-react-native"; +import { View, Text } from "react-native"; + +export default function Logo() { + return ( + <View className="flex flex-row gap-2 justify-center items-center "> + <PackageOpen color="black" size={70} /> + <Text className="text-5xl">Hoarder</Text> + </View> + ); +} 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 }; diff --git a/packages/mobile/components/ui/Input.tsx b/packages/mobile/components/ui/Input.tsx new file mode 100644 index 00000000..6fc90b8f --- /dev/null +++ b/packages/mobile/components/ui/Input.tsx @@ -0,0 +1,28 @@ +import { forwardRef } from "react"; +import { Text, TextInput, View } from "react-native"; + +import { cn } from "@/lib/utils"; + +export interface InputProps + extends React.ComponentPropsWithoutRef<typeof TextInput> { + label?: string; + labelClasses?: string; + inputClasses?: string; +} + +const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>( + ({ className, label, labelClasses, inputClasses, ...props }, ref) => ( + <View className={cn("flex flex-col gap-1.5", className)}> + {label && <Text className={cn("text-base", labelClasses)}>{label}</Text>} + <TextInput + className={cn( + inputClasses, + "border border-input py-2.5 px-4 rounded-lg", + )} + {...props} + /> + </View> + ), +); + +export { Input }; |
