78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
// Metro module 11662 (f11663).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import useTheme from "../../../../hooks/useTheme";
|
|
import { isThemeDark } from "../../../../design/shared";
|
|
import GuildPowerupsCard from "./GuildPowerupsCard";
|
|
import GuildPowerupsImage from "./GuildPowerupsImage";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { GuildPowerupsCardFooter } from "./GuildPowerupsCardFooter";
|
|
import { TextBadge, BadgeColors } from "../../../../design/void/native";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
marginHorizontal: Module712.space.PX_16
|
|
},
|
|
card: {
|
|
padding: 0,
|
|
overflow: "hidden"
|
|
},
|
|
contentContainer: {
|
|
gap: Module712.space.PX_16,
|
|
padding: Module712.space.PX_16
|
|
},
|
|
imageContainer: {
|
|
width: "100%",
|
|
height: 160
|
|
},
|
|
gradient: {
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
height: "100%"
|
|
},
|
|
headerContainer: {
|
|
gap: Module712.space.PX_4
|
|
},
|
|
badge: {
|
|
position: "absolute",
|
|
top: Module712.space.PX_12,
|
|
right: Module712.space.PX_12
|
|
}
|
|
});
|
|
export default function GuildPowerupsPerkCard(props) {
|
|
const { title, description, imageUrl: _imageUrl, isImageAnimated: _isImageAnimated, riveComponent: _riveComponent, style, onPress, status, badge, ...props2 } = props;
|
|
let imageUrl = props.imageUrl;
|
|
let isImageAnimated = props.isImageAnimated;
|
|
if (isImageAnimated === void 0) {
|
|
isImageAnimated = true;
|
|
}
|
|
let riveComponent = props.riveComponent;
|
|
const styles = useStyles();
|
|
const colors = isThemeDark(useTheme()) ? ["#0f101100", "#0f101166"] : ["#0f101100", "#0f10111a"];
|
|
if (riveComponent == null) {
|
|
if (imageUrl == null) {
|
|
imageUrl = "";
|
|
}
|
|
riveComponent = <GuildPowerupsImage imageUrl={imageUrl} isAnimated={isImageAnimated} />;
|
|
}
|
|
return <GuildPowerupsCard containerStyle={[styles.container, style]} style={styles.card} status={status} onPress={onPress}>
|
|
<View style={styles.imageContainer}>
|
|
{riveComponent}
|
|
<Module4611 colors={colors} style={styles.gradient} />
|
|
</View>
|
|
<View style={styles.contentContainer}>
|
|
<View style={styles.headerContainer}>
|
|
<Text variant="heading-md/bold">{title}</Text>
|
|
<Text variant="text-sm/medium">{description}</Text>
|
|
</View>
|
|
<GuildPowerupsCardFooter {...props2} status={status} />
|
|
</View>
|
|
{badge === "new" && <TextBadge text={intl.string(t.y2b7CA)} style={styles.badge} />}
|
|
{badge === "beta" && <TextBadge text={intl.string(t.oW0eUd)} color={BadgeColors.BRAND} style={styles.badge} />}
|
|
</GuildPowerupsCard>;
|
|
};
|