src/components/ProgressGuide/Task.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import React from 'react'
import {View} from 'react-native'
import * as Progress from 'react-native-progress'

import {atoms as a, useTheme} from '#/alf'
import {AnimatedCheck} from '../anim/AnimatedCheck'
import {Text} from '../Typography'

export function ProgressGuideTask({
  current,
  total,
  title,
  subtitle,
}: {
  current: number
  total: number
  title: string
  subtitle?: string
}) {
  const t = useTheme()

  return (
    <View style={[a.flex_row, a.gap_sm, !subtitle && a.align_center]}>
      {current === total ? (
        <AnimatedCheck playOnMount fill={t.palette.primary_500} width={20} />
      ) : (
        <Progress.Circle
          progress={current / total}
          color={t.palette.primary_400}
          size={20}
          thickness={3}
          borderWidth={0}
          unfilledColor={t.palette.contrast_50}
        />
      )}

      <View style={[a.flex_col, a.gap_2xs, {marginTop: -2}]}>
        <Text style={[a.text_sm, a.font_bold, a.leading_tight]}>{title}</Text>
        {subtitle && (
          <Text
            style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}>
            {subtitle}
          </Text>
        )}
      </View>
    </View>
  )
}