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