71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
// Metro module 8749 (f8750).
|
|
import { View } from "react-native";
|
|
import { VerticalGradient } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { t, intl } from "../../../intl/index.native";
|
|
import Module4611 from "../../../_bundle/Module4611";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import Module8750 from "../../../_bundle/Module8750";
|
|
import NitroIcon from "./NitroIcon";
|
|
import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: Module712.space.PX_24,
|
|
borderRadius: Module712.radii.lg,
|
|
overflow: "hidden",
|
|
alignSelf: "center",
|
|
gap: Module712.space.PX_16
|
|
},
|
|
gradient: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0
|
|
},
|
|
headerImage: {
|
|
width: 211,
|
|
height: 157,
|
|
resizeMode: "cover"
|
|
},
|
|
nitroIconContainer: {
|
|
alignSelf: "flex-start"
|
|
},
|
|
benefits: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
benefitRow: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_8,
|
|
alignItems: "center"
|
|
}
|
|
});
|
|
export function FractionalNitroPreview() {
|
|
const styles = useStyles();
|
|
return <View style={styles.container}>
|
|
<Module4611 colors={["#000000", "#36266d"]} start={VerticalGradient.START} end={VerticalGradient.END} style={styles.gradient} />
|
|
<FastImage source={{
|
|
uri: Module8750
|
|
}} style={styles.headerImage} />
|
|
<View style={styles.nitroIconContainer}>
|
|
<NitroIcon />
|
|
</View>
|
|
<View style={styles.benefits}>
|
|
{[t.E1NP2x, t.kpMomJ, t.xT1Vfn, t.myyAEr, t.zTk8Ul].map((item, index) => <View key={index} style={styles.benefitRow}>
|
|
<CheckmarkSmallIcon color={Module712.colors.WHITE} />
|
|
<Text variant="text-sm/medium" color="text-overlay-light">
|
|
{intl.string(item)}
|
|
</Text>
|
|
</View>)}
|
|
</View>
|
|
</View>;
|
|
}
|