Sebastian Krüger
9126589de3
- Hero: remove framer-motion, CSS stagger animations, glass pill CTA button, refined typography and scroll indicator - Stats: remove framer-motion, Lucide icons, tighter glass cards with mono labels - ToolsGrid: remove framer-motion, editorial section heading, 4-col xl grid - ToolCard: replace framer-motion motion.Link with plain Link + CSS hover, compact layout (icon→title→desc→badges+arrow), ElementType icon prop - Footer: remove framer-motion, matches sidebar footer style - BackToTop: remove framer-motion, JS scroll progress bar (1px primary line), compact glass button - not-found: remove framer-motion and shadcn Button, glass pill CTA, 120px mono 404, CSS stagger - page.tsx: remove unnecessary 'use client' directive Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { ChevronUp } from 'lucide-react';
|
|
|
|
export default function BackToTop() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const barRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => {
|
|
setIsVisible(window.scrollY > 300);
|
|
if (barRef.current) {
|
|
const el = document.documentElement;
|
|
const scrolled = el.scrollTop / (el.scrollHeight - el.clientHeight);
|
|
barRef.current.style.transform = `scaleX(${scrolled})`;
|
|
}
|
|
};
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{/* Scroll progress bar */}
|
|
<div
|
|
ref={barRef}
|
|
className="fixed top-0 left-0 right-0 h-px bg-primary z-50 origin-left"
|
|
style={{ transform: 'scaleX(0)', transition: 'transform 0.1s linear' }}
|
|
/>
|
|
|
|
{/* Back to top button */}
|
|
{isVisible && (
|
|
<button
|
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
|
className="fixed bottom-6 right-6 w-8 h-8 glass rounded-lg flex items-center justify-center text-muted-foreground/40 hover:text-primary hover:border-primary/40 transition-all duration-200 z-40"
|
|
aria-label="Back to top"
|
|
style={{ animation: 'fadeIn 0.2s ease-out both' }}
|
|
>
|
|
<ChevronUp className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</>
|
|
);
|
|
}
|