# All files / atlas/src/components/Auth Buttons.tsx

100% Statements 5/5
100% Branches 0/0
100% Functions 2/2
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50

    7x
    1x

    7x
    1x

    7x

     import React from "react";
    import { GestureResponderEvent, StyleProp, StyleSheet, Text, TouchableOpacity, ViewStyle } from "react-native";
    import { colors } from "../../globals";

    export type ButtonProps = {
        text: string,
        onPress: (event: GestureResponderEvent) => void,
        style?: StyleProp<ViewStyle>
    }

    /**
     * A general component that represents a primary button.
     * @component
     */
    export const PrimaryButton: React.FC<ButtonProps> = ({text, onPress, style}) => {
        return(
        <TouchableOpacity style={[styles.btn, styles.primaryBtn, style]} onPress={onPress}>
            <Text style={{color: 'white'}}>{text}</Text>
        </TouchableOpacity>)
    }

    /**
     * A general component that represents a secondary button.
     * @component
     */
    export const SecondaryButton: React.FC<ButtonProps> = ({text, onPress, style}) => {
        return(
        <TouchableOpacity style={[styles.btn, styles.secondaryBtn, style]} onPress={onPress}>
            <Text style={{color: 'white'}}>{text}</Text>
        </TouchableOpacity>)
    }

    const styles = StyleSheet.create({
        btn: {
            borderRadius: 50,
            width: '100%',
            justifyContent: 'center',
            alignItems: 'center',
            height: 60,
            marginBottom: 20,
        },
        primaryBtn: {
            backgroundColor: colors.red,
        },
        secondaryBtn: {
            borderColor: 'white',
            borderWidth: 2,
            backgroundColor: 'transparent',
        }
    })