1import React from 'react'; 2import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ThemeText from './themeText'; 5import useColors from '@/hooks/useColors'; 6 7interface ITagProps { 8 tagName: string; 9 containerStyle?: StyleProp<ViewStyle>; 10 style?: StyleProp<TextStyle>; 11} 12export default function Tag(props: ITagProps) { 13 const colors = useColors(); 14 return ( 15 <View 16 style={[ 17 styles.tag, 18 {backgroundColor: colors.card, borderColor: colors.divider}, 19 props.containerStyle, 20 ]}> 21 <ThemeText style={[styles.tagText, props.style]} fontSize="tag"> 22 {props.tagName} 23 </ThemeText> 24 </View> 25 ); 26} 27 28const styles = StyleSheet.create({ 29 tag: { 30 height: rpx(32), 31 marginLeft: rpx(12), 32 paddingHorizontal: rpx(12), 33 borderRadius: rpx(24), 34 justifyContent: 'center', 35 alignItems: 'center', 36 flexShrink: 0, 37 borderWidth: 1, 38 borderStyle: 'solid', 39 }, 40 tagText: { 41 textAlignVertical: 'center', 42 }, 43}); 44