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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import React from 'react';
import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native';
import {SCREEN_WIDTH, normalize} from '../../utils';
import LinearGradient from 'react-native-linear-gradient';
import {
BACKGROUND_GRADIENT_MAP,
BADGE_GRADIENT_FIRST,
BADGE_GRADIENT_REST,
} from '../../constants';
import {TouchableOpacity} from 'react-native-gesture-handler';
interface BadgeItemProps {
title: string;
resourcePath: ImageSourcePropType;
index: Number;
selected: boolean;
onSelection: (ikey: string) => void;
}
const BadgeItem: React.FC<BadgeItemProps> = ({
title,
resourcePath,
selected,
index,
onSelection,
}) => {
return (
<LinearGradient
colors={
selected ? BACKGROUND_GRADIENT_MAP[0] : ['transparent', 'transparent']
}
useAngle={true}
angle={136.69}
style={styles.border}>
<TouchableOpacity
onPress={() => onSelection(title)}
style={{alignSelf: 'center', marginTop: 3}}>
<LinearGradient
colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
// BACKGROUND_GRADIENT_MAP
useAngle={true}
angle={136.69}
style={styles.item}>
<View style={styles.detailContainer}>
<Image source={resourcePath} style={styles.imageStyles} />
<View style={styles.textContainer}>
<Text style={styles.title}>{title}</Text>
</View>
</View>
</LinearGradient>
</TouchableOpacity>
</LinearGradient>
);
};
const styles = StyleSheet.create({
border: {
width: SCREEN_WIDTH / 3 - 20 + 6,
height: 146,
marginLeft: 10,
marginBottom: 12,
borderRadius: 8,
},
item: {
width: SCREEN_WIDTH / 3 - 20,
height: 140,
borderRadius: 8,
},
detailContainer: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 3,
borderRadius: 8,
borderColor: 'transparent',
},
selectedDetailContainer: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 3,
borderColor: 'white',
borderRadius: 8,
},
imageStyles: {
width: 40,
height: 40,
marginTop: '11%',
},
textContainer: {marginTop: '16%'},
title: {
fontSize: normalize(15),
fontWeight: '500',
lineHeight: normalize(17.9),
textAlign: 'center',
color: 'white',
marginHorizontal: '2%',
},
});
export default BadgeItem;
|
