1import ThemeText from '@/components/base/themeText'; 2import useColors from '@/hooks/useColors'; 3import rpx from '@/utils/rpx'; 4import React from 'react'; 5import {StyleProp, StyleSheet, ViewStyle} from 'react-native'; 6import {TouchableOpacity} from 'react-native-gesture-handler'; 7import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 8 9interface IActionButtonProps { 10 iconName: string; 11 iconColor?: string; 12 title: string; 13 action: () => void; 14 style?: StyleProp<ViewStyle>; 15} 16 17export default function ActionButton(props: IActionButtonProps) { 18 const {iconName, iconColor, title, action, style} = props; 19 const colors = useColors(); 20 // rippleColor="rgba(0, 0, 0, .32)" 21 return ( 22 <TouchableOpacity 23 onPress={action} 24 style={[ 25 styles.wrapper, 26 { 27 backgroundColor: colors.card, 28 }, 29 style, 30 ]}> 31 <> 32 <Icon 33 accessible={false} 34 name={iconName} 35 color={iconColor ?? colors.text} 36 size={rpx(48)} 37 /> 38 <ThemeText 39 accessible={false} 40 fontSize="subTitle" 41 fontWeight="semibold" 42 style={styles.text}> 43 {title} 44 </ThemeText> 45 </> 46 </TouchableOpacity> 47 ); 48} 49 50const styles = StyleSheet.create({ 51 wrapper: { 52 width: rpx(140), 53 height: rpx(144), 54 borderRadius: rpx(12), 55 flexGrow: 1, 56 flexShrink: 0, 57 flexDirection: 'column', 58 alignItems: 'center', 59 justifyContent: 'center', 60 }, 61 text: { 62 marginTop: rpx(12), 63 }, 64}); 65