70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import Svg, { Circle } from 'react-native-svg'
|
|
|
|
import { Block, Text } from '@/@share/components'
|
|
import { cn } from '@/utils/cn'
|
|
type ProgressProps = {
|
|
progress: number
|
|
className?: string
|
|
progressClassName?: string
|
|
}
|
|
|
|
export function ProgressLine({ progress, className, progressClassName }: ProgressProps) {
|
|
return (
|
|
<Block className={cn('h-[3px] w-full flex-row items-center rounded-[80] bg-line', className)}>
|
|
<Block
|
|
className={cn('h-[3px] rounded-full bg-primary', progressClassName)}
|
|
style={{ width: `${progress > 100 ? 100 : progress}%` }}
|
|
/>
|
|
</Block>
|
|
)
|
|
}
|
|
type ProgressRingProps = {
|
|
radius: number
|
|
strokeColor: string
|
|
strokeWidth: number
|
|
textColor: string
|
|
progress: number
|
|
minWidth?: number
|
|
}
|
|
export function ProgressRing({
|
|
radius,
|
|
strokeColor,
|
|
strokeWidth,
|
|
textColor,
|
|
progress,
|
|
minWidth = 66,
|
|
}: ProgressRingProps) {
|
|
// Calculate the progress for the circular indicator
|
|
const circumference = 2 * Math.PI * radius
|
|
const strokeDashoffset = circumference - (progress / 100) * circumference
|
|
return (
|
|
<Block style={{ minWidth }}>
|
|
<Block className="relative size-[44px] items-center justify-center">
|
|
{/* Background gray ring */}
|
|
<Block className="absolute size-[44px] items-center justify-center rounded-3xl border-[3px] border-line bg-white" />
|
|
|
|
{/* Progress ring */}
|
|
<Svg height="44" style={{ position: 'absolute' }} viewBox="0 0 44 44" width="44">
|
|
<Circle
|
|
cx="22"
|
|
cy="22"
|
|
fill="transparent"
|
|
r={radius}
|
|
stroke={strokeColor}
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={strokeDashoffset}
|
|
strokeLinecap="round"
|
|
strokeWidth={strokeWidth}
|
|
transform="rotate(-90, 22, 22)"
|
|
/>
|
|
</Svg>
|
|
|
|
{/* Progress text */}
|
|
<Text className={cn('text-center text-xs', textColor)}>{progress.toFixed(0)}%</Text>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
}
|
|
|
|
export default ProgressRing
|