73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import GetSvg from "@/assets/icons/svg/get.svg";
|
|
import { ThemedText } from "@/components/ThemedText";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
|
|
|
|
interface Props {
|
|
setUserType: (type: 'normal' | 'premium') => void;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
const Normal = (props: Props) => {
|
|
const { setUserType } = props;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<View style={[styles.normalInfo, props.style]}>
|
|
<View style={styles.normalItem}>
|
|
<View style={styles.normalItemContent}>
|
|
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
|
|
<GetSvg style={{ marginTop: 8 }} />
|
|
<ThemedText style={{ fontSize: 12, fontWeight: '500', color: "#4C320C" }}>{t('rights.100Bonus', { ns: 'personal' })}</ThemedText>
|
|
</View>
|
|
<ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>{t('rights.100BonusText', { ns: 'personal' })}</ThemedText>
|
|
</View>
|
|
<View style={styles.normalItemContent}>
|
|
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
|
|
<GetSvg style={{ marginTop: 8 }} />
|
|
<ThemedText style={{ fontSize: 12, fontWeight: '500', color: "#4C320C" }}>{t('rights.10G', { ns: 'personal' })}</ThemedText>
|
|
</View>
|
|
<ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>{t('rights.10GText', { ns: 'personal' })}</ThemedText>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.goPro}
|
|
onPress={async () => {
|
|
setUserType('premium');
|
|
}}
|
|
activeOpacity={0.8}
|
|
>
|
|
<ThemedText style={{ color: '#fff', fontWeight: '700', fontSize: 14 }}>
|
|
{t('rights.purchase', { ns: 'personal' })}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default Normal;
|
|
const styles = StyleSheet.create({
|
|
goPro: {
|
|
backgroundColor: '#E2793F',
|
|
borderRadius: 24,
|
|
paddingVertical: 12,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
},
|
|
normalInfo: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 16
|
|
},
|
|
normalItem: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
gap: 16
|
|
},
|
|
normalItemContent: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}
|
|
}); |