1import React, {ReactNode} from 'react'; 2import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ThemeText from './themeText'; 5import useColors from '@/hooks/useColors'; 6import IconButton from './iconButton'; 7 8interface IChipProps { 9 containerStyle?: StyleProp<ViewStyle>; 10 children?: ReactNode; 11 onPress?: () => void; 12 onClose?: () => void; 13} 14export default function Chip(props: IChipProps) { 15 const {containerStyle, children, onPress, onClose} = props; 16 const colors = useColors(); 17 18 return ( 19 <Pressable 20 onPress={onPress} 21 style={[ 22 styles.container, 23 { 24 backgroundColor: colors.placeholder, 25 }, 26 containerStyle, 27 ]}> 28 {typeof children === 'string' ? ( 29 <ThemeText fontSize="subTitle">{children}</ThemeText> 30 ) : ( 31 children 32 )} 33 <IconButton 34 onPress={onClose} 35 name="close" 36 sizeType="small" 37 style={styles.icon} 38 /> 39 </Pressable> 40 ); 41} 42 43const styles = StyleSheet.create({ 44 container: { 45 height: rpx(56), 46 paddingHorizontal: rpx(18), 47 borderRadius: rpx(28), 48 flexDirection: 'row', 49 alignItems: 'center', 50 justifyContent: 'center', 51 }, 52 icon: { 53 marginLeft: rpx(8), 54 }, 55}); 56