Something went wrong. Try again.
An ATproto social media client -- with an independent Appview.
Something went wrong. Try again.
1.4 kB · 57 lines
TSX
at commit 8ce9bdb2
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758import {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, tabularNumsTitle,}: { current: number total: number title: string subtitle?: string tabularNumsTitle?: boolean}) { 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, subtitle && {marginTop: -2}]}> <Text style={[ a.text_sm, a.font_bold, a.leading_tight, tabularNumsTitle && {fontVariant: ['tabular-nums']}, ]}> {title} </Text> {subtitle && ( <Text style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}> {subtitle} </Text> )} </View> </View> )}