Scroll Indicator

1'use client'
2 
3import { useEffect, useState, useRef, useCallback, type ReactNode } from 'react'
4import { motion, useSpring, useMotionValue, useReducedMotion } from 'motion/react'
5import { cn } from '@/lib/utils'
6import { playHoverSound, playClickSound } from '@/lib/sound'
7 
8interface Section {
9  id: string
10  title: ReactNode
11  level: number
12}
13 
14interface ScrollIndicatorProps {
15  sections: Section[]
16  activeIndex?: number
17  onIndexChange?: (index: number) => void
18  scrollRef?: React.RefObject<HTMLDivElement | null>
19  className?: string
20}
21 
22export function ScrollIndicator({
23  sections,
24  activeIndex: controlledIndex,
25  onIndexChange,
26  scrollRef: externalScrollRef,
27  className,
28}: ScrollIndicatorProps) {
29  const [internalIndex, setInternalIndex] = useState(0)
30  const [isHovered, setIsHovered] = useState(false)
31  const [trackHeight, setTrackHeight] = useState(0)
32  const trackRef = useRef<HTMLDivElement>(null)
33  const reduceMotion = useReducedMotion()
34 
35  const activeIndex = controlledIndex ?? internalIndex
36 
37  const progressY = useMotionValue(0)
38  const smoothY = useSpring(progressY, {
39    stiffness: reduceMotion ? 1000 : 300,
40    damping: reduceMotion ? 100 : 30,
41  })
42 
43  const filteredSections = sections.filter((s) => s.level === 2 || s.level === 3)
44  const totalTicks = 60
45 
46  const updateHeight = useCallback(() => {
47    if (trackRef.current) {
48      setTrackHeight(trackRef.current.clientHeight)
49    }
50  }, [])
51 
52  useEffect(() => {
53    updateHeight()
54    window.addEventListener('resize', updateHeight)
55    return () => window.removeEventListener('resize', updateHeight)
56  }, [updateHeight])
57 
58  useEffect(() => {
59    if (trackHeight <= 0 || filteredSections.length === 0) return
60    const targetY = (activeIndex / Math.max(filteredSections.length - 1, 1)) * trackHeight
61    progressY.set(targetY)
62  }, [activeIndex, trackHeight, filteredSections.length, progressY])
63 
64  const handleClick = (index: number) => {
65    playClickSound()
66    if (onIndexChange) {
67      onIndexChange(index)
68    } else {
69      setInternalIndex(index)
70    }
71 
72    const container = externalScrollRef?.current
73    const sectionEl = container?.querySelector(`[data-section-index="${index}"]`)
74    if (container && sectionEl) {
75      const top = (sectionEl as HTMLElement).offsetTop - container.offsetTop + 8
76      container.scrollTo({ top, behavior: 'smooth' })
77    }
78  }
79 
80  return (
81    <div className={cn('h-full', className)}>
82      <div
83        ref={trackRef}
84        className="h-full relative"
85// … truncated