diff options
| author | Ivan Chen <ivan@tagg.id> | 2021-07-08 17:42:47 -0400 |
|---|---|---|
| committer | Ivan Chen <ivan@tagg.id> | 2021-07-09 15:56:47 -0400 |
| commit | f78bb9fea2128825d9c9cf4a64a7b78a288250b1 (patch) | |
| tree | 4e1f88d9c538bd0b92153982b9c9839dcb40b020 /src/components/common/TaggSquareButton.tsx | |
| parent | 8b3bb9164453498b78e497e4e8f3a5252b4159ea (diff) | |
Add logic to create custom category action
Diffstat (limited to 'src/components/common/TaggSquareButton.tsx')
| -rw-r--r-- | src/components/common/TaggSquareButton.tsx | 9 |
1 files changed, 8 insertions, 1 deletions
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 2447276d..b1e65ba6 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {FC} from 'react'; import { GestureResponderEvent, StyleProp, @@ -25,6 +25,7 @@ interface TaggSquareButtonProps extends TouchableOpacityProps { labelColor: 'white' | 'blue'; style?: StyleProp<ViewStyle>; labelStyle?: StyleProp<TextStyle>; + icon?: Element; } const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { @@ -55,6 +56,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { {...props} onPress={props.onPress} style={[styles.largeButton, buttonColor, props.style]}> + {props.icon} <Text style={[styles.largeLabel, labelColor, props.labelStyle]}> {props.title} </Text> @@ -71,6 +73,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { colors={BACKGROUND_GRADIENT_MAP[0]} useAngle angle={90}> + {props.icon} <Text style={[styles.gradientLabel, props.labelStyle]}> {props.title} </Text> @@ -84,6 +87,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { {...props} onPress={props.onPress} style={[styles.normalButton, buttonColor, props.style]}> + {props.icon} <Text style={[styles.normalLabel, labelColor, props.labelStyle]}> {props.title} </Text> @@ -94,6 +98,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { const styles = StyleSheet.create({ largeButton: { + flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '70%', @@ -106,6 +111,7 @@ const styles = StyleSheet.create({ color: '#eee', }, normalButton: { + flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: SCREEN_WIDTH * 0.45, @@ -118,6 +124,7 @@ const styles = StyleSheet.create({ fontWeight: '500', }, gradientButton: { + flexDirection: 'row', marginTop: '8%', borderRadius: 5, paddingVertical: '5%', |