Stats Section One

1'use client'
2 
3import type { ComponentProps } from 'react'
4import { useEffect, useMemo, useRef } from 'react'
5import {
6  animate,
7  motion,
8  useInView,
9  useMotionValue,
10  useReducedMotion,
11  useTransform,
12} from 'motion/react'
13 
14import { cn } from '@/lib/utils'
15 
16export type BusinessMetric = {
17  value: number
18  label: string
19  detail?: string
20  prefix?: string
21  suffix?: string
22  decimals?: number
23}
24 
25export type AnimatedStatValueProps = {
26  value: number
27  prefix?: string
28  suffix?: string
29  decimals?: number
30  duration?: number
31  className?: string
32}
33 
34export type StatsSectionOneProps = ComponentProps<'section'> & {
35  eyebrow?: string
36  heading?: string
37  description?: string
38  metrics?: readonly BusinessMetric[]
39}
40 
41const defaultMetrics: readonly BusinessMetric[] = [
42  {
43    value: 38,
44    suffix: '%',
45    label: 'Faster delivery',
46    detail: 'Within the first 90 days',
47  },
48  {
49    value: 18,
50    suffix: ' hrs',
51    label: 'Saved every week',
52    detail: 'Per operations team',
53  },
54  {
55    value: 3.2,
56    suffix: '×',
57    decimals: 1,
58    label: 'Return on spend',
59    detail: 'Measured over 12 months',
60  },
61  {
62    value: 99.9,
63    suffix: '%',
64    decimals: 1,
65    label: 'Platform uptime',
66    detail: 'Across all workspaces',
67  },
68]
69 
70export function AnimatedStatValue({
71  value,
72  prefix = '',
73  suffix = '',
74  decimals = 0,
75  duration = 1.1,
76  className,
77}: AnimatedStatValueProps) {
78  const ref = useRef<HTMLSpanElement>(null)
79  const shouldReduceMotion = useReducedMotion()
80  const isInView = useInView(ref, {
81    once: true,
82    amount: 0.6,
83  })
84 
85  const animatedValue = useMotionValue(shouldReduceMotion ? value : 0)
86 
87  const formatter = useMemo(
88    () =>
89      new Intl.NumberFormat('en-US', {
90        minimumFractionDigits: decimals,
91        maximumFractionDigits: decimals,
92      }),
93    [decimals],
94  )
95 
96  const formattedValue = useTransform(
97    animatedValue,
98    (latest) => `${prefix}${formatter.format(latest)}${suffix}`,
99  )
100 
101  const finalValue = `${prefix}${formatter.format(value)}${suffix}`
102 
103  useEffect(() => {
104    if (!isInView) return
105 
106    if (shouldReduceMotion) {
107      animatedValue.set(value)
108      return
109    }
110 
111    const controls = animate(animatedValue, value, {
112      duration,
113      ease: [0.22, 1, 0.36, 1],
114    })
115 
116    return () => controls.stop()
117  }, [animatedValue, duration, isInView, shouldReduceMotion, value])
118 
119  return (
120    <span ref={ref} className={cn('inline-block tabular-nums', className)}>
121// … truncated