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