33 lines
1006 B
TypeScript
33 lines
1006 B
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useReducedMotion } from '../hooks/useReducedMotion'
|
|
|
|
export default function ScrollProgress() {
|
|
const [progress, setProgress] = useState(0)
|
|
const reducedMotion = useReducedMotion()
|
|
|
|
useEffect(() => {
|
|
if (reducedMotion) return
|
|
|
|
const handleScroll = () => {
|
|
const scrollTop = window.scrollY
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight
|
|
const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0
|
|
setProgress(scrollPercent)
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [reducedMotion])
|
|
|
|
if (reducedMotion) return null
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 right-0 z-[60] h-[2px] bg-transparent">
|
|
<div
|
|
className="h-full bg-pink-brand transition-all duration-100 ease-out"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|