Ring

1'use client'
2 
3import { useInView } from '@/registry/hooks/use-in-view'
4import { type ReactNode, type RefObject, useEffect, useState } from 'react'
5 
6import { cn } from '@/lib/utils'
7 
8export interface RingProps {
9  ariaLabel?: string
10  children?: ReactNode
11  className?: string
12  percentage: number
13  radius?: number
14  ringColor?: string
15  ringTrackColor?: string
16  strokeWidth?: number
17}
18 
19export const Ring = ({
20  ariaLabel,
21  children,
22  className = '',
23  percentage,
24  radius = 40,
25  ringColor = 'var(--color-primary)',
26  ringTrackColor = 'var(--color-muted)',
27  strokeWidth = 12,
28}: RingProps) => {
29  const [value, setValue] = useState(0)
30  const { isInView, ref } = useInView()
31  const circumference = 2 * Math.PI * radius
32  const strokeDashoffset = circumference - (value / 100) * circumference
33 
34  useEffect(() => {
35    if (isInView) {
36      // Small delay to ensure the initial render happens at 0
37      const timer = requestAnimationFrame(() => {
38        setValue(percentage)
39      })
40      return () => cancelAnimationFrame(timer)
41    }
42  }, [isInView, percentage])
43 
44  return (
45    <div
46      ref={ref as RefObject<HTMLDivElement>}
47      className={cn('relative shrink-0', className)}
48      aria-label={ariaLabel}
49      role={ariaLabel ? 'img' : undefined}
50    >
51      <svg className='h-full w-full -rotate-90' viewBox='0 0 100 100'>
52        <circle
53          cx='50'
54          cy='50'
55          r={radius}
56          fill='none'
57          stroke={ringTrackColor}
58          strokeWidth={strokeWidth}
59        />
60        <circle
61          cx='50'
62          cy='50'
63          r={radius}
64          fill='none'
65          stroke={ringColor}
66          strokeWidth={strokeWidth}
67          strokeLinecap='round'
68          strokeDasharray={circumference}
69          strokeDashoffset={strokeDashoffset}
70          className='transition-all duration-1000 ease-out-expo'
71        />
72      </svg>
73      <div className='absolute inset-0 flex items-center justify-center'>{children}</div>
74    </div>
75  )
76}