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