xref: /MusicFree/src/components/base/button.tsx (revision d1a36a67ac3d03c61d8bafd8ac2bc121ea4f6f3e)
1import {
2    GestureResponderEvent,
3    StyleProp,
4    StyleSheet,
5    TouchableOpacity,
6    ViewStyle,
7} from 'react-native';
8import useColors from '@/hooks/useColors.ts';
9import ThemeText from '@/components/base/themeText.tsx';
10import React from 'react';
11import rpx from '@/utils/rpx.ts';
12
13export function Button(props: {
14    type?: 'normal' | 'primary';
15    text: string;
16    style?: StyleProp<ViewStyle>;
17    onPress?: (evt: GestureResponderEvent) => void;
18}) {
19    const {type = 'normal', text, style, onPress} = props;
20    const colors = useColors();
21
22    return (
23        <TouchableOpacity
24            activeOpacity={0.6}
25            onPress={onPress}
26            style={[
27                styles.bottomBtn,
28                {
29                    backgroundColor:
30                        type === 'normal' ? colors.placeholder : colors.primary,
31                },
32                style,
33            ]}>
34            <ThemeText color={type === 'normal' ? undefined : 'white'}>
35                {text}
36            </ThemeText>
37        </TouchableOpacity>
38    );
39}
40
41const styles = StyleSheet.create({
42    bottomBtn: {
43        borderRadius: rpx(8),
44        flexShrink: 0,
45        justifyContent: 'center',
46        alignItems: 'center',
47        height: rpx(72),
48    },
49});
50