import React, { useEffect, useRef, useState } from 'react'; interface FadeInSectionProps { children: React.ReactNode; direction?: 'up' | 'down' | 'left' | 'right'; className?: string; } export const FadeInSection: React.FC = ({ children, direction = 'up', className = '' }) => { const [isVisible, setIsVisible] = useState(false); const domRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => setIsVisible(entry.isIntersecting)); }, { threshold: 0.1 }); const { current } = domRef; if (current) observer.observe(current); return () => { if (current) observer.unobserve(current); }; }, []); const directionClasses = { up: 'translate-y-10', down: '-translate-y-10', left: 'translate-x-10', right: '-translate-x-10' }; return (
{children}
); };