DS Boyce
117 lines
3.7 KiB
TypeScript
117 lines
3.7 KiB
TypeScript
import {useState} from 'react'
|
|
import {View} from 'react-native'
|
|
import {Trans, useLingui} from '@lingui/react/macro'
|
|
|
|
import {useInterestsDisplayNames} from '#/lib/interests'
|
|
import {Nux, useSaveNux} from '#/state/queries/nuxs'
|
|
import {usePreferencesQuery} from '#/state/queries/preferences'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
|
import {Shapes_Stroke2_Corner0_Rounded as ShapesIcon} from '#/components/icons/Shapes'
|
|
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
|
import {Link} from '#/components/Link'
|
|
import * as Prompt from '#/components/Prompt'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
export function ExploreInterestsCard() {
|
|
const t = useTheme()
|
|
const {t: l} = useLingui()
|
|
const {data: preferences} = usePreferencesQuery()
|
|
const interestsDisplayNames = useInterestsDisplayNames()
|
|
const {mutateAsync: saveNux} = useSaveNux()
|
|
const trendingPrompt = Prompt.usePromptControl()
|
|
const [closing, setClosing] = useState(false)
|
|
|
|
const onClose = () => {
|
|
trendingPrompt.open()
|
|
}
|
|
const onConfirmClose = () => {
|
|
setClosing(true)
|
|
// if this fails, they can try again later
|
|
saveNux({
|
|
id: Nux.ExploreInterestsCard,
|
|
completed: true,
|
|
data: undefined,
|
|
}).catch(() => {})
|
|
}
|
|
|
|
return closing ? null : (
|
|
<>
|
|
<Prompt.Basic
|
|
control={trendingPrompt}
|
|
title={l`Dismiss interests`}
|
|
description={l`You can adjust your interests at any time from "Content and media" settings.`}
|
|
confirmButtonCta={l({
|
|
message: `OK`,
|
|
comment: `Confirm button text.`,
|
|
})}
|
|
onConfirm={onConfirmClose}
|
|
/>
|
|
|
|
<View>
|
|
<View
|
|
style={[a.p_lg, a.border_b, a.gap_md, t.atoms.border_contrast_low]}>
|
|
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
|
|
<ShapesIcon fill={t.atoms.text.color} />
|
|
<Text style={[a.text_lg, a.font_semi_bold]}>
|
|
<Trans>Your interests</Trans>
|
|
</Text>
|
|
</View>
|
|
|
|
{preferences?.interests?.tags &&
|
|
preferences.interests.tags.length > 0 ? (
|
|
<View style={[a.flex_row, a.flex_wrap, {gap: 6}]}>
|
|
{preferences.interests.tags.map(tag => (
|
|
<View
|
|
key={tag}
|
|
style={[
|
|
a.justify_center,
|
|
a.align_center,
|
|
a.rounded_full,
|
|
t.atoms.bg_contrast_25,
|
|
a.px_lg,
|
|
{height: 32},
|
|
]}>
|
|
<Text style={[a.text_sm, t.atoms.text_contrast_high]}>
|
|
{interestsDisplayNames[tag]}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
) : null}
|
|
|
|
<Text style={[a.text_sm, a.leading_snug]}>
|
|
<Trans>Your interests help us find what you like!</Trans>
|
|
</Text>
|
|
|
|
<Link
|
|
label={l`Edit interests`}
|
|
to="/settings/interests"
|
|
size="small"
|
|
variant="solid"
|
|
color="primary"
|
|
style={[a.justify_center]}>
|
|
<ButtonText>
|
|
<Trans>Edit interests</Trans>
|
|
</ButtonText>
|
|
</Link>
|
|
|
|
<Button
|
|
label={l`Hide this card`}
|
|
size="small"
|
|
variant="ghost"
|
|
color="secondary"
|
|
shape="round"
|
|
onPress={onClose}
|
|
style={[
|
|
a.absolute,
|
|
{top: a.pt_sm.paddingTop, right: a.pr_sm.paddingRight},
|
|
]}>
|
|
<ButtonIcon icon={X} size="md" />
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|