118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
// Metro module 13944 (f13945).
|
|
import { Image as Image2, View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
|
|
import { useAgeSpecificText } from "../hooks/useAgeSpecificText";
|
|
import { intl } from "../../../intl/index.native";
|
|
import FamilyCenter_messages from "../FamilyCenter.messages";
|
|
import Module13945 from "../../../_bundle/Module13945";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { FamilyCenterParentQRCodeButton, FamilyCenterTeenQRCodeButton } from "./FamilyCenterBannerButton";
|
|
let useStyles, useStyles2, useStyles3, FamilyCenterLinkingBannerTeenContent, useStyles4, FamilyCenterLinkingInstructionsRow;
|
|
const FamilyCenterLinkingBannerParentContent = function FamilyCenterLinkingBannerParentContent() {
|
|
return <View style={useStyles2().container}>
|
|
<FamilyCenterLinkingInstructionsRow index={1} header={intl.string(FamilyCenter_messages["7xxAni"])} description={intl.string(FamilyCenter_messages["1M9So2"])} />
|
|
<FamilyCenterLinkingInstructionsRow index={2} header={intl.string(FamilyCenter_messages["AXgx+a"])} description={intl.string(FamilyCenter_messages.GzMFnb)} />
|
|
<FamilyCenterLinkingInstructionsRow index={3} header={intl.string(FamilyCenter_messages.MZn1tG)} description={intl.string(FamilyCenter_messages["8rLBxD"])} isLast />
|
|
<FamilyCenterParentQRCodeButton />
|
|
</View>;
|
|
};
|
|
FamilyCenterLinkingBannerTeenContent = function FamilyCenterLinkingBannerTeenContent() {
|
|
return <View style={useStyles3().container}>
|
|
<FamilyCenterTeenQRCodeButton />
|
|
</View>;
|
|
};
|
|
FamilyCenterLinkingInstructionsRow = function FamilyCenterLinkingInstructionsRow(props) {
|
|
const { header, description, index, isLast } = props;
|
|
const styles4 = useStyles4();
|
|
return <View style={styles4.row}>
|
|
<View style={styles4.circle}>
|
|
<Text variant="heading-md/semibold" color="text-brand">{index}</Text>
|
|
</View>
|
|
<View style={[styles4.rowContent, isLast ? null : styles4.gap]}>
|
|
<Text variant="heading-sm/bold">{header}</Text>
|
|
<Text variant="text-sm/medium" color="text-muted">{description}</Text>
|
|
</View>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
marginTop: Module712.space.PX_16,
|
|
paddingTop: 0,
|
|
paddingBottom: Module712.space.PX_16,
|
|
alignItems: "center",
|
|
borderRadius: Module712.radii.md,
|
|
elevation: 2,
|
|
overflow: "hidden"
|
|
},
|
|
content: {
|
|
padding: Module712.space.PX_16
|
|
},
|
|
art: {
|
|
width: "100%",
|
|
height: 175,
|
|
marginBottom: Module712.space.PX_12
|
|
},
|
|
header: {
|
|
marginBottom: Module712.space.PX_8
|
|
}
|
|
});
|
|
useStyles2 = createStyles({
|
|
container: {
|
|
marginTop: Module712.space.PX_8,
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
width: "100%"
|
|
}
|
|
});
|
|
useStyles3 = createStyles({
|
|
container: {
|
|
width: "100%",
|
|
paddingHorizontal: Module712.space.PX_16
|
|
}
|
|
});
|
|
useStyles4 = createStyles({
|
|
row: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "flex-start"
|
|
},
|
|
gap: {
|
|
marginBottom: 12
|
|
},
|
|
circle: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
overflow: "hidden",
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: Module712.radii.round,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL
|
|
},
|
|
rowContent: {
|
|
marginLeft: 12,
|
|
flex: 1
|
|
}
|
|
});
|
|
export default function FamilyCenterLinkingBanner() {
|
|
const styles = useStyles();
|
|
const isInAdultAgeGroup = useIsInAdultAgeGroup();
|
|
return <View style={styles.container}>
|
|
<Image2 source={Module13945} style={styles.art} resizeMethod="resize" />
|
|
<View style={styles.content}>
|
|
<Text style={styles.header} variant="heading-lg/semibold">
|
|
{useAgeSpecificText(intl.string(FamilyCenter_messages.zUCWEL), intl.string(FamilyCenter_messages.B0NPbp))}
|
|
</Text>
|
|
<Text variant="text-sm/medium" color="text-muted">
|
|
{useAgeSpecificText(intl.format(FamilyCenter_messages.yMnoDl, {
|
|
link: "https://support.discord.com/hc/articles/14155060633623"
|
|
}), intl.string(FamilyCenter_messages.JsAEDi))}
|
|
</Text>
|
|
</View>
|
|
{isInAdultAgeGroup ? <FamilyCenterLinkingBannerParentContent /> : <FamilyCenterLinkingBannerTeenContent />}
|
|
</View>;
|
|
};
|