Assist_Design/apps/portal/src/components/atoms/AnimatedContainer.tsx
barsa bde9f706ce feat: add VPN services and call history management features
- Implemented VpnServicesService for managing VPN plans and activation fees.
- Created SimCallHistoryFormatterService for formatting call history data.
- Developed SimCallHistoryParserService to parse call history CSV files.
- Added AnimatedContainer and AnimatedBackground components for UI animations.
- Introduced BentoServiceCard, FloatingGlassCard, GlowButton, and ValuePropCard components for landing page.
- Implemented useCountUp hook for animated number counting.
- Added cancellation months utility functions for subscription management.
2026-01-13 16:19:39 +09:00

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>
);
}