84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
// Metro module 12515 (f12516).
|
|
import { View } from "react-native";
|
|
import { Gradients } from "../../../colors/native/ColorConstants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import usePremiumGroupFeaturesTableCardText from "../hooks/usePremiumGroupFeaturesTableCardText";
|
|
import { GradientBorder } from "../../../../design/void/native";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import { hexWithOpacity } from "../../../../utils/ColorUtils";
|
|
import PremiumGroupWordmark from "./PremiumGroupWordmark";
|
|
let useStyles;
|
|
const BetaPill = function BetaPill() {
|
|
const styles = useStyles();
|
|
return <View style={styles.betaPill}>
|
|
<Text variant="text-xs/bold" style={styles.betaText}>
|
|
{intl.string(t.oW0eUd)}
|
|
</Text>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
premiumGroupCard: {
|
|
padding: 16,
|
|
borderRadius: Module712.radii.sm - 2,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
display: "flex",
|
|
alignItems: "flex-start"
|
|
},
|
|
headerContainer: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
marginBottom: 4
|
|
},
|
|
betaPill: {
|
|
backgroundColor: Module712.colors.WHITE,
|
|
borderRadius: Module712.radii.round,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingHorizontal: 8,
|
|
paddingBottom: 2
|
|
},
|
|
betaText: {
|
|
color: Module712.colors.BLACK,
|
|
textAlign: "center",
|
|
textTransform: "uppercase"
|
|
},
|
|
title: {
|
|
color: Module712.colors.TEXT_DEFAULT,
|
|
marginBottom: 16
|
|
},
|
|
description: {
|
|
color: Module712.colors.TEXT_DEFAULT
|
|
}
|
|
});
|
|
export default function PremiumGroupFeaturesTableCard(props) {
|
|
const { style, premiumGroupRole } = props;
|
|
const styles = useStyles();
|
|
const premiumGroupFeaturesTableCardText = usePremiumGroupFeaturesTableCardText(premiumGroupRole, false);
|
|
if (premiumGroupFeaturesTableCardText == null) {
|
|
return null;
|
|
}
|
|
const { subheaderString, bodyString } = premiumGroupFeaturesTableCardText;
|
|
return <GradientBorder borderWidth={2} direction={GradientBorder.Direction.HORIZONTAL} colors={Gradients.PREMIUM_TIER_2} borderRadius={Module712.radii.sm} style={style}>
|
|
<Module4611 start={{
|
|
x: 0,
|
|
y: 0
|
|
}} end={{
|
|
x: 1,
|
|
y: 0
|
|
}} colors={[hexWithOpacity("#8547C6", 0.15), hexWithOpacity("#B845C1", 0.15), hexWithOpacity("#AB5D8A", 0.15)]} locations={[0, 0.4996, 0.9593]} style={styles.premiumGroupCard}>
|
|
<View style={styles.headerContainer}>
|
|
<PremiumGroupWordmark width={181} height={16} />
|
|
<BetaPill />
|
|
</View>
|
|
<Text variant="text-sm/normal" style={styles.title}>{subheaderString}</Text>
|
|
<Text variant="text-sm/normal" style={styles.description}>{bodyString}</Text>
|
|
</Module4611>
|
|
</GradientBorder>;
|
|
};
|
|
export { BetaPill };
|