{"size": 1014, "ext": "js", "max_stars_repo_path": "Tesla/src/components/Button.js", "max_stars_repo_name": "dev-mohib/React-Native-Ecommerce-Screens", "max_stars_repo_stars_event_min_datetime": "2021-03-17T14:08:59.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-01T06:17:26.000Z", "max_issues_repo_path": "Tesla/src/components/Button.js", "max_issues_repo_name": "dev-mohib/React-Native-Ecommerce-Screens", "max_issues_repo_issues_event_min_datetime": "2021-03-16T15:53:09.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-19T03:56:36.000Z", "max_forks_repo_path": "Tesla/src/components/Button.js", "max_forks_repo_name": "dev-mohib/React-Native-Ecommerce-Screens", "max_forks_repo_forks_event_min_datetime": "2021-03-16T07:10:13.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-01T06:17:29.000Z"}
{"max_stars_count": 12, "max_issues_count": 3, "max_forks_count": 7, "avg_line_length": 25.35, "max_line_length": 80, "alphanum_fraction": 0.5424063116}
import React from 'react';
import {View, Text, StyleSheet, Pressable} from 'react-native';

const StyledButton = (props) => {
    const {type, content, onPress} = props;

    const backgroundColor = type === 'primary' ? '#171A20CC' : '#FFFFFFA6';
    const textColor = type === 'primary' ? '#FFFFFF' : '#171A20';

    return (
        <View style={styles.container}>
            <Pressable
                style={[styles.button, {backgroundColor: backgroundColor}]}
                onPress={() => onPress()}>
                <Text style={[styles.text, {color: textColor}]}>{content}</Text>
            </Pressable>
        </View>
    );
};

export default StyledButton;

const styles = StyleSheet.create({
    container: {
        width: '100%',
        padding: 10,
    },
    button: {
        height: 40,
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 12,
        fontWeight: '500',
        textTransform: 'uppercase',
    },
});
