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, select, useTheme, type ViewStyleProp} from '#/alf'
6import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
7import {useDialogControl} from '#/components/ageAssurance/AgeAssuranceInitDialog'
8import type * as Dialog from '#/components/Dialog'
9import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
10import {InlineLinkText} from '#/components/Link'
11import {Text} from '#/components/Typography'
12import {useAgeAssurance} from '#/ageAssurance'
13import {logger} from '#/ageAssurance'
14
15export function AgeAssuranceAdmonition({
16 children,
17 style,
18}: ViewStyleProp & {children: React.ReactNode}) {
19 const control = useDialogControl()
20 const aa = useAgeAssurance()
21
22 if (aa.state.access === aa.Access.Full) return null
23 if (aa.state.error === 'config') {
24 return <AgeAssuranceConfigUnavailableError style={style} />
25 }
26
27 return (
28 <Inner style={style} control={control}>
29 {children}
30 </Inner>
31 )
32}
33
34function Inner({
35 children,
36 style,
37}: ViewStyleProp & {
38 children: React.ReactNode
39 control: Dialog.DialogControlProps
40}) {
41 const t = useTheme()
42 const {_} = useLingui()
43
44 return (
45 <>
46 <View style={style}>
47 <View
48 style={[
49 a.p_md,
50 a.rounded_md,
51 a.border,
52 a.flex_row,
53 a.align_start,
54 a.gap_sm,
55 {
56 backgroundColor: select(t.name, {
57 light: t.palette.primary_25,
58 dark: t.palette.primary_25,
59 dim: t.palette.primary_25,
60 }),
61 borderColor: select(t.name, {
62 light: t.palette.primary_100,
63 dark: t.palette.primary_100,
64 dim: t.palette.primary_100,
65 }),
66 },
67 ]}>
68 <View
69 style={[
70 a.align_center,
71 a.justify_center,
72 a.rounded_full,
73 {
74 width: 32,
75 height: 32,
76 backgroundColor: select(t.name, {
77 light: t.palette.primary_100,
78 dark: t.palette.primary_100,
79 dim: t.palette.primary_100,
80 }),
81 },
82 ]}>
83 <Shield size="md" />
84 </View>
85 <View style={[a.flex_1, a.gap_xs, a.pr_4xl]}>
86 <Text style={[a.text_sm, a.leading_snug]}>{children}</Text>
87 <Text style={[a.text_sm, a.leading_snug, a.font_semi_bold]}>
88 <Trans>
89 Learn more in your{' '}
90 <InlineLinkText
91 label={_(msg`Go to account settings`)}
92 to={'/settings/account'}
93 style={[a.text_sm, a.leading_snug, a.font_semi_bold]}
94 onPress={() => {
95 logger.metric('ageAssurance:navigateToSettings', {})
96 }}>
97 account settings.
98 </InlineLinkText>
99 </Trans>
100 </Text>
101 </View>
102 </View>
103 </View>
104 </>
105 )
106}