46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { ChevronUp } from 'lucide-react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
|
|
export const FloatingButtons: React.FC = () => {
|
|
const [showScrollTop, setShowScrollTop] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setShowScrollTop(window.scrollY > 400);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth',
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-6 right-6 z-50 flex flex-col gap-3">
|
|
{/* Scroll to Top */}
|
|
<AnimatePresence>
|
|
{showScrollTop && (
|
|
<motion.button
|
|
initial={{ opacity: 0, scale: 0.8, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.8, y: 20 }}
|
|
whileHover={{ y: -3, scale: 1.05 }}
|
|
onClick={scrollToTop}
|
|
className="w-12 h-12 bg-white hover:bg-gray-50 text-gray-700 rounded-full shadow-soft hover:shadow-soft-hover border border-gray-100 flex items-center justify-center transition-colors"
|
|
title="Scroll to top"
|
|
>
|
|
<ChevronUp size={22} className="stroke-[2.5]" />
|
|
</motion.button>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|