40 lines
1,018 B
React
40 lines
1,018 B
React
|
import { TouchableOpacity, Text, Image, View } from "@vendetta/ui/components/General";
|
||
|
|
import { createThemedStyleSheet } from "@vendetta/metro/common/stylesheet";
|
||
|
|
import { semanticColors } from "@vendetta/ui";
|
||
|
|
|
||
|
|
const stylesheet = createThemedStyleSheet({
|
||
|
|
container: {
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
image: {
|
||
|
|
marginLeft: 5,
|
||
|
|
marginRight: 5,
|
||
|
|
width: 25,
|
||
|
|
height: 25,
|
||
|
|
borderRadius: 100,
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
color: semanticColors.HEADER_PRIMARY,
|
||
|
|
},
|
||
|
|
labelRemove: {
|
||
|
|
color: semanticColors.TEXT_WARNING,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default ({ imageSource, onImagePress, label, labelRemove = "REMOVE", onRemove }) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<View style={stylesheet.container}>
|
||
|
|
<TouchableOpacity onPress={onRemove}>
|
||
|
|
<Text style={stylesheet.labelRemove}>{labelRemove}</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity onPress={onImagePress}>
|
||
|
|
<Image style={[stylesheet.image]} source={imageSource} />
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text style={stylesheet.label}>{label}</Text>
|
||
|
|
</View>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|