mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {View} from 'react-native'
2import * as Progress from 'react-native-progress'
3
4import {atoms as a, useTheme} from '#/alf'
5import {AnimatedCheck} from '../anim/AnimatedCheck'
6import {Text} from '../Typography'
7
8export function ProgressGuideTask({
9 current,
10 total,
11 title,
12 subtitle,
13 tabularNumsTitle,
14}: {
15 current: number
16 total: number
17 title: string
18 subtitle?: string
19 tabularNumsTitle?: boolean
20}) {
21 const t = useTheme()
22
23 return (
24 <View style={[a.flex_row, a.gap_sm, !subtitle && a.align_center]}>
25 {current === total ? (
26 <AnimatedCheck playOnMount fill={t.palette.primary_500} width={20} />
27 ) : (
28 <Progress.Circle
29 progress={current / total}
30 color={t.palette.primary_400}
31 size={20}
32 thickness={3}
33 borderWidth={0}
34 unfilledColor={t.palette.contrast_50}
35 />
36 )}
37
38 <View style={[a.flex_col, a.gap_2xs, subtitle && {marginTop: -2}]}>
39 <Text
40 style={[
41 a.text_sm,
42 a.font_semi_bold,
43 a.leading_tight,
44 tabularNumsTitle && {fontVariant: ['tabular-nums']},
45 ]}>
46 {title}
47 </Text>
48 {subtitle && (
49 <Text
50 style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}>
51 {subtitle}
52 </Text>
53 )}
54 </View>
55 </View>
56 )
57}