'use client'; import { useCallback } from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const circleProgress = cva('relative inline-block overflow-hidden', { variants: { size: { sm: 'size-8', md: 'size-14', lg: 'size-20', }, }, defaultVariants: { size: 'md', }, }); type CircleProgressVariants = VariantProps; const indicator = cva('transition-all ease-linear', { variants: { colors: { primary: 'stroke-primary', secondary: 'stroke-secondary', warning: 'stroke-warning', danger: 'stroke-danger', neutral: 'dark:stroke-neutral-500 stroke-neutral-400', }, }, defaultVariants: { colors: 'primary', }, }); type IndicatorVariants = VariantProps; interface CircleProgressProps extends React.HTMLAttributes, CircleProgressVariants, IndicatorVariants { percent?: number; min?: number; max?: number; } const RADIUS = 10; const strokeDashLength = 2 * Math.PI * RADIUS; export default function CircleProgress({ className, min = 0, max = 100, percent = 0, colors, size, children, ...props }: CircleProgressProps) { const updateOffset = useCallback(() => { const percentage = percent < min ? min : percent > max ? max : percent; const offset = strokeDashLength - (strokeDashLength * percentage) / 100; return offset >= strokeDashLength ? strokeDashLength : offset; }, [percent, min, max]); return (

{children}

); }

CircleProgress

default

size

colors

controlled