55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { getVariants, getViewportSettings } from '../utils/helpers';
|
|
import {
|
|
staggerContainer,
|
|
fastStaggerContainer,
|
|
backgroundVariants
|
|
} from '../utils/animations';
|
|
|
|
interface SectionWrapperProps {
|
|
id: string;
|
|
children: React.ReactNode;
|
|
containerType?: 'stagger' | 'fastStagger';
|
|
backgroundGradient?: string;
|
|
className?: string;
|
|
isMobile?: boolean;
|
|
variantType?: 'section' | 'card' | 'footer';
|
|
}
|
|
|
|
export function SectionWrapper({
|
|
id,
|
|
children,
|
|
containerType = 'stagger',
|
|
backgroundGradient,
|
|
className = '',
|
|
isMobile = false,
|
|
variantType = 'section'
|
|
}: SectionWrapperProps) {
|
|
const containerVariants = containerType === 'fastStagger' ? fastStaggerContainer : staggerContainer;
|
|
const viewportType = variantType === 'footer' ? 'footer' : variantType;
|
|
|
|
return (
|
|
<motion.section
|
|
id={id}
|
|
className={`relative ${className}`}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={getViewportSettings(viewportType)}
|
|
variants={containerVariants}
|
|
>
|
|
{backgroundGradient && (
|
|
<motion.div
|
|
className={`absolute inset-0 ${backgroundGradient}`}
|
|
variants={backgroundVariants}
|
|
/>
|
|
)}
|
|
|
|
<motion.div
|
|
className="relative z-10"
|
|
variants={getVariants(variantType, isMobile)}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</motion.section>
|
|
);
|
|
} |