56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import React, { useRef, useEffect } from 'react';
|
|
import { useCardAnimation } from '@/hooks/useCardAnimation';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
|
|
|
|
interface TimelineProcessFlowProps {
|
|
children: React.ReactNode[];
|
|
animationType: CardAnimationType;
|
|
itemCount: number;
|
|
useIndividualTriggers?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({
|
|
children,
|
|
animationType,
|
|
itemCount,
|
|
useIndividualTriggers = false,
|
|
className,
|
|
}) => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
|
|
|
|
const { itemRefs: animationItemRefs } = useCardAnimation({
|
|
animationType,
|
|
itemCount,
|
|
useIndividualTriggers,
|
|
});
|
|
|
|
useEffect(() => {
|
|
itemRefs.current = itemRefs.current.slice(0, itemCount);
|
|
}, [itemCount]);
|
|
|
|
return (
|
|
<div ref={containerRef} className={cn('timeline-process-flow', className)}>
|
|
{React.Children.map(children, (child, index) => (
|
|
<div
|
|
key={index}
|
|
ref={(el) => {
|
|
if (el) itemRefs.current[index] = el;
|
|
if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
|
|
}}
|
|
className="timeline-item"
|
|
>
|
|
{child}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimelineProcessFlow;
|