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