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 {logger} from '#/ageAssurance'
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
46 return (
47 <>
48 <View style={style}>
49 <View
50 style={[
51 a.p_md,
52 a.rounded_md,
53 a.border,
54 a.flex_row,
55 a.align_start,
56 a.gap_sm,
57 {
58 backgroundColor: select(t.name, {
59 light: t.palette.primary_25,
60 dark: t.palette.primary_25,
61 dim: t.palette.primary_25,
62 }),
63 borderColor: select(t.name, {
64 light: t.palette.primary_100,
65 dark: t.palette.primary_100,
66 dim: t.palette.primary_100,
67 }),
68 },
69 ]}>
70 <View
71 style={[
72 a.align_center,
73 a.justify_center,
74 enableSquareButtons ? a.rounded_sm : a.rounded_full,
75 {
76 width: 32,
77 height: 32,
78 backgroundColor: select(t.name, {
79 light: t.palette.primary_100,
80 dark: t.palette.primary_100,
81 dim: t.palette.primary_100,
82 }),
83 },
84 ]}>
85 <Shield size="md" />
86 </View>
87 <View style={[a.flex_1, a.gap_xs, a.pr_4xl]}>
88 <Text style={[a.text_sm, a.leading_snug]}>{children}</Text>
89 <Text style={[a.text_sm, a.leading_snug, a.font_semi_bold]}>
90 <Trans>
91 Learn more in your{' '}
92 <InlineLinkText
93 label={_(msg`Go to account settings`)}
94 to={'/settings/account'}
95 style={[a.text_sm, a.leading_snug, a.font_semi_bold]}
96 onPress={() => {
97 logger.metric('ageAssurance:navigateToSettings', {})
98 }}>
99 account settings.
100 </InlineLinkText>
101 </Trans>
102 </Text>
103 </View>
104 </View>
105 </View>
106 </>
107 )
108}