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