feat(wip homepage with new design)
This commit is contained in:
33
resources/js/components/common/ScrollToTop.tsx
Normal file
33
resources/js/components/common/ScrollToTop.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { ChevronUp } from 'lucide-react';
|
||||
|
||||
export function ScrollToTop() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const hero = document.getElementById('hero');
|
||||
if (!hero) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => setIsVisible(!entry.isIntersecting),
|
||||
{ threshold: 0 },
|
||||
);
|
||||
|
||||
observer.observe(hero);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
aria-label="Retour en haut"
|
||||
className="fixed bottom-6 right-6 z-50 p-3 rounded-full border-3 border-black bg-primary shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition duration-200"
|
||||
>
|
||||
<ChevronUp className="size-5" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user