39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export function ReadingProgress() {
|
|
const [progress, setProgress] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const updateProgress = () => {
|
|
const scrollTop = window.scrollY
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight
|
|
const scrollPercent = (scrollTop / docHeight) * 100
|
|
setProgress(Math.min(scrollPercent, 100))
|
|
}
|
|
|
|
window.addEventListener('scroll', updateProgress, { passive: true })
|
|
updateProgress()
|
|
return () => window.removeEventListener('scroll', updateProgress)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed top-0 left-0 right-0 h-1.5 bg-[rgb(var(--bg-secondary))] dark:bg-black z-50 border-b-2 border-[rgb(var(--border-primary))]">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-[var(--neon-cyan)] via-[var(--neon-magenta)] to-[var(--neon-pink)] transition-all duration-150"
|
|
style={{
|
|
width: `${progress}%`,
|
|
boxShadow: progress > 0 ? '0 0 8px var(--neon-cyan)' : 'none',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="fixed top-4 right-4 z-50 px-3 py-1.5 bg-[rgb(var(--bg-primary))] border-2 border-[var(--neon-cyan)] text-xs font-mono font-bold text-[var(--neon-cyan)] relative">
|
|
<span className="relative z-10">[{Math.round(progress)}%]</span>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|