43 lines
1005 B
TypeScript
43 lines
1005 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { cn } from "@/shared/utils";
|
||
|
|
|
||
|
|
interface AnimatedContainerProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
className?: string;
|
||
|
|
/** Animation type */
|
||
|
|
animation?: "fade-up" | "fade-scale" | "slide-left" | "none";
|
||
|
|
/** Whether to stagger children animations */
|
||
|
|
stagger?: boolean;
|
||
|
|
/** Delay before animation starts in ms */
|
||
|
|
delay?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Reusable animation wrapper component
|
||
|
|
* Provides consistent entrance animations for page content
|
||
|
|
*/
|
||
|
|
export function AnimatedContainer({
|
||
|
|
children,
|
||
|
|
className,
|
||
|
|
animation = "fade-up",
|
||
|
|
stagger = false,
|
||
|
|
delay = 0,
|
||
|
|
}: AnimatedContainerProps) {
|
||
|
|
const animationClass = {
|
||
|
|
"fade-up": "cp-animate-in",
|
||
|
|
"fade-scale": "cp-animate-scale-in",
|
||
|
|
"slide-left": "cp-animate-slide-left",
|
||
|
|
none: "",
|
||
|
|
}[animation];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(animationClass, stagger && "cp-stagger-children", className)}
|
||
|
|
style={delay > 0 ? { animationDelay: `${delay}ms` } : undefined}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|