72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import GetSvg from "@/assets/icons/svg/get.svg";
|
|
import { ThemedText } from "@/components/ThemedText";
|
|
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;
|
|
|
|
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" }}>Enjoy 100 Bonus Credits Every Month</ThemedText>
|
|
</View>
|
|
<ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>Generate more memory pictures & videos and explore your past.</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" }}>10GB of Cloud Storage</ThemedText>
|
|
</View>
|
|
<ThemedText style={{ fontSize: 10, color: "#AC7E35", marginLeft: 20 }}>Safely store your cherished photos, videos, and generated memories.</ThemedText>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.goPro}
|
|
onPress={async () => {
|
|
setUserType('premium');
|
|
}}
|
|
activeOpacity={0.8}
|
|
>
|
|
<ThemedText style={{ color: '#fff', fontWeight: '700', fontSize: 14 }}>
|
|
Go Premium
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default Normal;
|
|
const styles = StyleSheet.create({
|
|
goPro: {
|
|
backgroundColor: '#E2793F',
|
|
borderRadius: 24,
|
|
paddingVertical: 6,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
},
|
|
normalInfo: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 16
|
|
},
|
|
normalItem: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
gap: 16
|
|
},
|
|
normalItemContent: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}
|
|
}); |