Progress Bar

1'use client'
2 
3import { useInView } from '@/registry/hooks/use-in-view'
4import { useEffect, useState } from 'react'
5 
6import { cn } from '@/lib/utils'
7 
8export interface ProgressBarProps {
9  className?: string
10  fillClassName?: string
11  percentage: number
12}
13 
14export const ProgressBar = ({
15  className,
16  percentage,
17  fillClassName,
18}: ProgressBarProps) => {
19  const [width, setWidth] = useState(0)
20  const { isInView, ref } = useInView()
21 
22  const safePercentage = Number.isFinite(percentage) ? percentage : 0
23  const normalized = Math.min(100, Math.max(0, safePercentage))
24 
25  useEffect(() => {
26    if (isInView) {
27      // Small delay to ensure the initial render happens at 0
28      const timer = requestAnimationFrame(() => {
29        setWidth(normalized)
30      })
31      return () => cancelAnimationFrame(timer)
32    }
33  }, [isInView, normalized])
34 
35  return (
36    <div
37      ref={ref as React.RefObject<HTMLDivElement>}
38      className={cn('h-2 w-full rounded-full bg-muted', className)}
39    >
40      <div
41        className={cn(
42          'h-full rounded-full bg-primary transition-width! duration-1000 ease-out-expo',
43          fillClassName,
44        )}
45        style={{ width: `${width}%` }}
46      />
47    </div>
48  )
49}
50 
51export interface SegmentedProgressBarProps {
52  className?: string
53  segments: Array<{
54    color?: string
55    label?: string
56    value: number
57  }>
58  total: number
59}
60 
61export const SegmentedProgressBar = ({
62  className,
63  segments,
64  total,
65}: SegmentedProgressBarProps) => {
66  const [animatedMultiplier, setAnimatedMultiplier] = useState(0)
67  const { isInView, ref } = useInView()
68  const safeTotal = total > 0 ? total : 1
69 
70  useEffect(() => {
71    if (isInView) {
72      // Small delay to ensure the initial render happens at 0
73      const timer = requestAnimationFrame(() => {
74        setAnimatedMultiplier(1)
75      })
76      return () => cancelAnimationFrame(timer)
77    }
78  }, [isInView])
79 
80  return (
81    <div
82      ref={ref as React.RefObject<HTMLDivElement>}
83      className={cn('flex h-2 w-full overflow-hidden rounded-full bg-muted', className)}
84    >
85      {segments.map((segment, index) => {
86        const percentage = (segment.value / safeTotal) * 100
87        const animatedWidth = Math.max(0, percentage) * animatedMultiplier
88        return (
89          <div
90            key={segment.label || index}
91            className='h-full transition-width! duration-1000 ease-out-expo first:rounded-l-full last:rounded-r-full'
92            style={{
93// … truncated