mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {StyleProp, View, ViewStyle} from 'react-native'
2import {msg, Trans} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {
6 useProgressGuide,
7 useProgressGuideControls,
8} from '#/state/shell/progress-guide'
9import {atoms as a, useTheme} from '#/alf'
10import {Button, ButtonIcon} from '#/components/Button'
11import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times'
12import {Text} from '#/components/Typography'
13import {ProgressGuideTask} from './Task'
14
15export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
16 const t = useTheme()
17 const {_} = useLingui()
18 const guide = useProgressGuide('like-10-and-follow-7')
19 const {endProgressGuide} = useProgressGuideControls()
20
21 if (guide) {
22 return (
23 <View style={[a.flex_col, a.gap_md, style]}>
24 <View style={[a.flex_row, a.align_center, a.justify_between]}>
25 <Text
26 style={[
27 t.atoms.text_contrast_medium,
28 a.font_bold,
29 a.text_sm,
30 {textTransform: 'uppercase'},
31 ]}>
32 <Trans>Getting started</Trans>
33 </Text>
34 <Button
35 variant="ghost"
36 size="tiny"
37 color="secondary"
38 shape="round"
39 label={_(msg`Dismiss getting started guide`)}
40 onPress={endProgressGuide}>
41 <ButtonIcon icon={Times} size="sm" />
42 </Button>
43 </View>
44 <ProgressGuideTask
45 current={guide.numLikes + 1}
46 total={10 + 1}
47 title={_(msg`Like 10 posts`)}
48 subtitle={_(msg`Teach our algorithm what you like`)}
49 />
50 <ProgressGuideTask
51 current={guide.numFollows + 1}
52 total={7 + 1}
53 title={_(msg`Follow 7 accounts`)}
54 subtitle={_(msg`Bluesky is better with friends!`)}
55 />
56 </View>
57 )
58 }
59 return null
60}