xref: /MusicFree/src/components/base/iconTextButton.tsx (revision e650bfb34226e2a09d15cbf7832c4805a87cd60e)

import React from 'react';
import {StyleProp, StyleSheet, ViewProps} from 'react-native';
import rpx from '@/utils/rpx';
import ThemeText from './themeText';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {iconSizeConst} from '@/constants/uiConst';
import useColors from '@/hooks/useColors';
import {TouchableOpacity} from 'react-native-gesture-handler';

interface IProps {
    icon: string;
    onPress?: () => void;
    containerStyle?: StyleProp<ViewProps>;
    children?: string;
}
export default function (props: IProps) {
    const {icon, children, onPress} = props;
    const colors = useColors();

    return (
        <TouchableOpacity style={style.container} onPress={onPress}>
            <Icon name={icon} size={iconSizeConst.light} color={colors.text} />
            <ThemeText style={style.text} fontSize={'content'}>
                {children}
            </ThemeText>
        </TouchableOpacity>
    );
}

const style = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: rpx(16),
        paddingVertical: rpx(8),
    },
    text: {
        marginLeft: rpx(8),
    },
});