forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import {msg, Trans} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {atoms as a} from '#/alf'
6import {Admonition} from '#/components/Admonition'
7import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
8import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
9import {ButtonIcon, ButtonText} from '#/components/Button'
10import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
11import * as Layout from '#/components/Layout'
12import {Link} from '#/components/Link'
13import {Text} from '#/components/Typography'
14import {useAgeAssurance} from '#/ageAssurance'
15import {logger} from '#/ageAssurance'
16
17export function AgeRestrictedScreen({
18 children,
19 screenTitle,
20 infoText,
21 rightHeaderSlot,
22}: {
23 children: React.ReactNode
24 screenTitle?: string
25 infoText?: string
26 rightHeaderSlot?: React.ReactNode
27}) {
28 const {_} = useLingui()
29 const copy = useAgeAssuranceCopy()
30 const aa = useAgeAssurance()
31
32 if (aa.state.access === aa.Access.Full) return children
33
34 return (
35 <Layout.Screen>
36 <Layout.Header.Outer>
37 <Layout.Header.BackButton />
38 <Layout.Header.Content align="left">
39 <Layout.Header.TitleText>
40 {screenTitle ?? <Trans>Unavailable</Trans>}
41 </Layout.Header.TitleText>
42 </Layout.Header.Content>
43 {rightHeaderSlot ?? <Layout.Header.Slot />}
44 </Layout.Header.Outer>
45 <Layout.Content>
46 <View style={[a.p_lg]}>
47 <View style={[a.align_start, a.pb_lg]}>
48 <AgeAssuranceBadge />
49 </View>
50
51 <View style={[a.gap_sm, a.pb_lg]}>
52 <Text style={[a.text_xl, a.leading_snug, a.font_bold]}>
53 <Trans>
54 You must complete age assurance in order to access this screen.
55 </Trans>
56 </Text>
57
58 <Text style={[a.text_md, a.leading_snug]}>{copy.notice}</Text>
59 </View>
60
61 <View
62 style={[a.flex_row, a.justify_between, a.align_center, a.pb_xl]}>
63 <Link
64 label={_(msg`Go to account settings`)}
65 to="/settings/account"
66 size="small"
67 variant="solid"
68 color="primary"
69 onPress={() => {
70 logger.metric('ageAssurance:navigateToSettings', {})
71 }}>
72 <ButtonText>
73 <Trans>Go to account settings</Trans>
74 </ButtonText>
75 <ButtonIcon icon={ChevronRight} position="right" />
76 </Link>
77 </View>
78
79 {infoText && <Admonition type="tip">{infoText}</Admonition>}
80 </View>
81 </Layout.Content>
82 </Layout.Screen>
83 )
84}