57 lines
1.0 KiB
TypeScript
57 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
TouchableOpacity,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacityProps,
|
|
} from 'react-native';
|
|
|
|
interface ButtonProps extends TouchableOpacityProps {
|
|
title: string;
|
|
variant?: 'primary' | 'secondary';
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
title,
|
|
variant = 'primary',
|
|
style,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.button, styles[variant], style]}
|
|
{...props}>
|
|
<Text style={[styles.text, styles[`${variant}Text`]]}>
|
|
{title}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 10,
|
|
borderRadius: 5,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
primary: {
|
|
backgroundColor: '#007AFF',
|
|
},
|
|
secondary: {
|
|
backgroundColor: '#ffffff',
|
|
borderWidth: 1,
|
|
borderColor: '#007AFF',
|
|
},
|
|
text: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
primaryText: {
|
|
color: '#ffffff',
|
|
},
|
|
secondaryText: {
|
|
color: '#007AFF',
|
|
},
|
|
});
|