robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useState} from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {useInterestsDisplayNames} from '#/lib/interests'
7import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
8import {Nux, useSaveNux} from '#/state/queries/nuxs'
9import {usePreferencesQuery} from '#/state/queries/preferences'
10import {atoms as a, useTheme} from '#/alf'
11import {Button, ButtonIcon, ButtonText} from '#/components/Button'
12import {Shapes_Stroke2_Corner0_Rounded as Shapes} from '#/components/icons/Shapes'
13import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
14import {Link} from '#/components/Link'
15import * as Prompt from '#/components/Prompt'
16import {Text} from '#/components/Typography'
17
18export function ExploreInterestsCard() {
19 const t = useTheme()
20 const {_} = useLingui()
21 const {data: preferences} = usePreferencesQuery()
22 const interestsDisplayNames = useInterestsDisplayNames()
23 const {mutateAsync: saveNux} = useSaveNux()
24 const trendingPrompt = Prompt.usePromptControl()
25 const [closing, setClosing] = useState(false)
26
27 const enableSquareButtons = useEnableSquareButtons()
28
29 const onClose = () => {
30 trendingPrompt.open()
31 }
32 const onConfirmClose = () => {
33 setClosing(true)
34 // if this fails, they can try again later
35 saveNux({
36 id: Nux.ExploreInterestsCard,
37 completed: true,
38 data: undefined,
39 }).catch(() => {})
40 }
41
42 return closing ? null : (
43 <>
44 <Prompt.Basic
45 control={trendingPrompt}
46 title={_(msg`Dismiss interests`)}
47 description={_(
48 msg`You can adjust your interests at any time from "Content and media" settings.`,
49 )}
50 confirmButtonCta={_(
51 msg({
52 message: `OK`,
53 comment: `Confirm button text.`,
54 }),
55 )}
56 onConfirm={onConfirmClose}
57 />
58
59 <View style={[a.pb_2xs]}>
60 <View
61 style={[
62 a.p_lg,
63 a.border_b,
64 a.gap_md,
65 t.atoms.border_contrast_medium,
66 ]}>
67 <View style={[a.flex_row, a.gap_sm, a.align_center]}>
68 <Shapes />
69 <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
70 <Trans>Your interests</Trans>
71 </Text>
72 </View>
73
74 {preferences?.interests?.tags &&
75 preferences.interests.tags.length > 0 ? (
76 <View style={[a.flex_row, a.flex_wrap, {gap: 6}]}>
77 {preferences.interests.tags.map(tag => (
78 <View
79 key={tag}
80 style={[
81 a.justify_center,
82 a.align_center,
83 enableSquareButtons ? a.rounded_sm : a.rounded_full,
84 t.atoms.bg_contrast_25,
85 a.px_lg,
86 {height: 32},
87 ]}>
88 <Text style={[a.text_sm, t.atoms.text_contrast_high]}>
89 {interestsDisplayNames[tag]}
90 </Text>
91 </View>
92 ))}
93 </View>
94 ) : null}
95
96 <Text style={[a.text_sm, a.leading_snug]}>
97 <Trans>Your interests help us find what you like!</Trans>
98 </Text>
99
100 <Link
101 label={_(msg`Edit interests`)}
102 to="/settings/interests"
103 size="small"
104 variant="solid"
105 color="primary"
106 style={[a.justify_center]}>
107 <ButtonText>
108 <Trans>Edit interests</Trans>
109 </ButtonText>
110 </Link>
111
112 <Button
113 label={_(msg`Hide this card`)}
114 size="small"
115 variant="ghost"
116 color="secondary"
117 shape={enableSquareButtons ? 'square' : 'round'}
118 onPress={onClose}
119 style={[
120 a.absolute,
121 {top: a.pt_sm.paddingTop, right: a.pr_sm.paddingRight},
122 ]}>
123 <ButtonIcon icon={X} size="md" />
124 </Button>
125 </View>
126 </View>
127 </>
128 )
129}