58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { ActivityIndicator, Pressable, Text } from 'react-native';
|
|
import type { PressableProps } from 'react-native';
|
|
|
|
type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
|
|
type Props = PressableProps & {
|
|
children: React.ReactNode;
|
|
variant?: Variant;
|
|
loading?: boolean;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
};
|
|
|
|
const variantStyles: Record<Variant, { container: string; text: string }> = {
|
|
primary: {
|
|
container: 'bg-rebreak-500 rounded-xl px-5 py-3.5 items-center justify-center',
|
|
text: 'text-white text-base',
|
|
},
|
|
secondary: {
|
|
container: 'bg-neutral-100 border border-neutral-200 rounded-xl px-5 py-3.5 items-center justify-center',
|
|
text: 'text-neutral-800 text-base',
|
|
},
|
|
ghost: {
|
|
container: 'rounded-xl px-5 py-3.5 items-center justify-center',
|
|
text: 'text-neutral-600 text-base',
|
|
},
|
|
danger: {
|
|
container: 'bg-red-50 border border-red-200 rounded-xl px-5 py-3.5 items-center justify-center',
|
|
text: 'text-red-600 text-base',
|
|
},
|
|
};
|
|
|
|
export function Button({
|
|
children,
|
|
variant = 'primary',
|
|
loading = false,
|
|
disabled = false,
|
|
className = '',
|
|
...rest
|
|
}: Props) {
|
|
const styles = variantStyles[variant];
|
|
const isDisabled = disabled || loading;
|
|
|
|
return (
|
|
<Pressable
|
|
className={`${styles.container} ${isDisabled ? 'opacity-50' : ''} ${className}`}
|
|
disabled={isDisabled}
|
|
{...rest}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color={variant === 'primary' ? '#fff' : '#f59e0b'} size="small" />
|
|
) : (
|
|
<Text className={styles.text} style={{ fontFamily: 'Nunito_600SemiBold' }}>{children}</Text>
|
|
)}
|
|
</Pressable>
|
|
);
|
|
}
|