119 lines
4.5 KiB
TypeScript
119 lines
4.5 KiB
TypeScript
// Metro module 7967 (f7968).
|
|
import { View } from "react-native";
|
|
import { PremiumTypes } from "../../premium/PremiumConstants";
|
|
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 PremiumFeaturesBackground from "../../user_settings/premium/native/PremiumFeaturesBackground";
|
|
import { LockIcon } from "../../../design/components/Icon/native/redesign/generated/LockIcon";
|
|
import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
|
|
const useStyles = createStyles({
|
|
badgeTextUppercase: {
|
|
textTransform: "uppercase"
|
|
},
|
|
badgeSurfaceDarkMode: {
|
|
backgroundColor: Module712.colors.WHITE
|
|
},
|
|
badgeSurfaceLightMode: {
|
|
backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND
|
|
},
|
|
newIconBadge: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BRAND,
|
|
borderRadius: Module712.radii.round,
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2
|
|
},
|
|
limitedTimeBadge: {
|
|
backgroundColor: Module712.colors.WHITE,
|
|
borderRadius: Module712.radii.md,
|
|
paddingHorizontal: Module712.space.PX_8,
|
|
paddingVertical: Module712.space.PX_4
|
|
},
|
|
lockIconBadge: {
|
|
backgroundColor: Module712.colors.ICON_OVERLAY_DARK,
|
|
padding: 5,
|
|
borderRadius: Module712.radii.round
|
|
},
|
|
newLockIconBadge: {
|
|
backgroundColor: Module712.unsafe_rawColors.PREMIUM_TIER_2_PINK_FOR_GRADIENTS_2,
|
|
flexDirection: "row",
|
|
paddingHorizontal: 5,
|
|
paddingVertical: 3,
|
|
borderRadius: Module712.radii.round,
|
|
alignItems: "center",
|
|
gap: 2
|
|
},
|
|
badgePill: {
|
|
paddingHorizontal: Module712.space.PX_4,
|
|
paddingVertical: 1.5,
|
|
borderRadius: Module712.radii.round,
|
|
flexShrink: 1
|
|
},
|
|
iconTextBadge: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 4,
|
|
paddingHorizontal: Module712.space.PX_8,
|
|
paddingVertical: 2,
|
|
borderRadius: Module712.radii.round
|
|
}
|
|
});
|
|
export function NewBadge(props) {
|
|
const style = props.style;
|
|
const styles = useStyles();
|
|
return <View style={[styles.newIconBadge, style]}>
|
|
<Text variant="text-sm/bold" color="text-overlay-light" style={styles.badgeTextUppercase}>
|
|
{intl.string(t.y2b7CA)}
|
|
</Text>
|
|
</View>;
|
|
}
|
|
export function LockBadge(props) {
|
|
const { isNew = false, style } = props;
|
|
const styles = useStyles();
|
|
return isNew ? <PremiumFeaturesBackground premiumType={PremiumTypes.TIER_2} style={[styles.newLockIconBadge, style]}>
|
|
<LockIcon size="xxs" color={Module712.colors.WHITE} />
|
|
<Text variant="text-xs/bold" color="text-overlay-light" style={styles.badgeTextUppercase}>
|
|
{intl.string(t.y2b7CA)}
|
|
</Text>
|
|
</PremiumFeaturesBackground> : <View style={[styles.lockIconBadge, style]}>
|
|
<LockIcon size="sm" color={Module712.colors.WHITE} />
|
|
</View>;
|
|
}
|
|
export function PremiumBadge(props) {
|
|
const { isNew = false, style } = props;
|
|
const styles = useStyles();
|
|
return isNew ? <PremiumFeaturesBackground premiumType={PremiumTypes.TIER_2} style={[styles.newLockIconBadge, style]}>
|
|
<NitroWheelIcon size="xxs" color={Module712.colors.WHITE} />
|
|
<Text variant="text-xs/bold" color="text-overlay-light" style={styles.badgeTextUppercase}>
|
|
{intl.string(t.y2b7CA)}
|
|
</Text>
|
|
</PremiumFeaturesBackground> : <View style={[styles.lockIconBadge, style]}>
|
|
<NitroWheelIcon size="sm" color={Module712.colors.WHITE} />
|
|
</View>;
|
|
}
|
|
export function LimitedTimeBadge(props) {
|
|
const style = props.style;
|
|
const styles = useStyles();
|
|
return <View style={[styles.limitedTimeBadge, style]}>
|
|
<Text variant="text-xs/bold" color="text-overlay-dark" style={styles.badgeTextUppercase}>
|
|
{intl.string(t["h/uBCR"])}
|
|
</Text>
|
|
</View>;
|
|
}
|
|
export function IconBadgePill(props) {
|
|
const { icon: Icon, accessibilityLabel, isDark } = props;
|
|
const styles = useStyles();
|
|
return <View style={[styles.badgePill, isDark ? styles.badgeSurfaceDarkMode : styles.badgeSurfaceLightMode]} accessibilityLabel={accessibilityLabel}>
|
|
<Icon size="xs" color={isDark ? "black" : "white"} />
|
|
</View>;
|
|
}
|
|
export function IconTextBadge(props) {
|
|
const { icon: Icon, label, isDark } = props;
|
|
const styles = useStyles();
|
|
return <View style={[styles.iconTextBadge, isDark ? styles.badgeSurfaceDarkMode : styles.badgeSurfaceLightMode]}>
|
|
<Icon size="xs" color={isDark ? "black" : "white"} />
|
|
<Text variant="text-xs/bold" color={isDark ? "text-overlay-dark" : "text-overlay-light"} style={styles.badgeTextUppercase}>{label}</Text>
|
|
</View>;
|
|
}
|