57 lines
1.4 KiB
TypeScript
57 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';
|
|
|
|
export interface CardListProps {
|
|
children: React.ReactNode[];
|
|
animationType: CardAnimationType;
|
|
itemCount: number;
|
|
useIndividualTriggers?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const CardList: React.FC<CardListProps> = ({
|
|
children,
|
|
animationType,
|
|
itemCount,
|
|
useIndividualTriggers = false,
|
|
className,
|
|
}) => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
|
|
|
|
const { itemRefs } = useCardAnimation({
|
|
animationType,
|
|
itemCount,
|
|
useIndividualTriggers,
|
|
});
|
|
|
|
useEffect(() => {
|
|
// Synchronize refs if needed
|
|
cardRefs.current = cardRefs.current.slice(0, itemCount);
|
|
}, [itemCount]);
|
|
|
|
return (
|
|
<div ref={containerRef} className={cn('card-list', className)}>
|
|
{React.Children.map(children, (child, index) => (
|
|
<div
|
|
key={index}
|
|
ref={(el) => {
|
|
if (el) cardRefs.current[index] = el;
|
|
if (itemRefs && itemRefs[index]) itemRefs[index].current = el;
|
|
}}
|
|
className="card-item"
|
|
>
|
|
{child}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CardList;
|