36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { useScrollEffects } from '../../hooks/useScrollEffects';
|
|
|
|
export const ScrollToTopButton: React.FC = () => {
|
|
const { isVisible, scrollToTop } = useScrollEffects();
|
|
|
|
return (
|
|
<button
|
|
onClick={scrollToTop}
|
|
className={`fixed bottom-6 right-6 z-50 w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center group border border-banquise-blue-lightest/30 backdrop-blur-sm ${
|
|
isVisible
|
|
? 'opacity-100 translate-y-0 scale-100'
|
|
: 'opacity-0 translate-y-4 scale-95 pointer-events-none'
|
|
}`}
|
|
aria-label="Retour en haut de page"
|
|
>
|
|
<svg
|
|
className="w-5 h-5 sm:w-6 sm:h-6 transition-transform duration-300 group-hover:-translate-y-0.5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2.5}
|
|
d="M7 11l5-5m0 0l5 5m-5-5v12"
|
|
/>
|
|
</svg>
|
|
|
|
{/* Effet de lueur au hover */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light to-banquise-blue rounded-full opacity-0 group-hover:opacity-75 transition-opacity duration-300 blur-sm"></div>
|
|
</button>
|
|
);
|
|
};
|