87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowUpIcon } from "lucide-react";
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ScrollToTopProps {
|
|
className?: string;
|
|
showIcon?: boolean;
|
|
offset?: number; // Optional offset in pixels from the trigger point
|
|
}
|
|
|
|
export function ScrollToTop({
|
|
className,
|
|
showIcon = true,
|
|
offset = 0
|
|
}: ScrollToTopProps) {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
const checkScroll = useCallback(() => {
|
|
// Calculate 50% of viewport height
|
|
const halfViewportHeight = window.innerHeight * 0.5;
|
|
// Check if scrolled past half viewport height (plus any offset)
|
|
const scrolledPastHalfViewport = window.scrollY > (halfViewportHeight + offset);
|
|
|
|
// Only update state if it changes to prevent unnecessary re-renders
|
|
if (scrolledPastHalfViewport !== isVisible) {
|
|
setIsVisible(scrolledPastHalfViewport);
|
|
}
|
|
}, [isVisible, offset]);
|
|
|
|
useEffect(() => {
|
|
// Initial check
|
|
checkScroll();
|
|
|
|
// Set up scroll listener with debounce for better performance
|
|
let timeoutId: NodeJS.Timeout;
|
|
const handleScroll = () => {
|
|
if (timeoutId) clearTimeout(timeoutId);
|
|
timeoutId = setTimeout(checkScroll, 100);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
|
|
// Cleanup
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
if (timeoutId) clearTimeout(timeoutId);
|
|
};
|
|
}, [checkScroll]);
|
|
|
|
const scrollToTop = useCallback((e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}, []);
|
|
|
|
if (!isVisible) return null;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"mt-4 pt-4 border-t border-stone-200 dark:border-stone-800",
|
|
"transition-opacity duration-300",
|
|
isVisible ? 'opacity-100' : 'opacity-0',
|
|
className
|
|
)}
|
|
>
|
|
<Link
|
|
href="#"
|
|
onClick={scrollToTop}
|
|
className={cn(
|
|
"inline-flex items-center text-sm text-muted-foreground hover:text-foreground",
|
|
"transition-all duration-200 hover:translate-y-[-1px]"
|
|
)}
|
|
aria-label="Scroll to top"
|
|
>
|
|
{showIcon && <ArrowUpIcon className="mr-1 h-3.5 w-3.5 flex-shrink-0" />}
|
|
<span>Scroll to Top</span>
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|