63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { useCardAnimation } from "./hooks/useCardAnimation";
|
|
|
|
interface CardStackProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
cardsOffset?: number;
|
|
scaleFactor?: number;
|
|
rotationFactor?: number;
|
|
animationDuration?: number;
|
|
ariaLabel: string;
|
|
}
|
|
|
|
export const CardStack: React.FC<CardStackProps> = ({
|
|
children,
|
|
className = "", cardsOffset = 10,
|
|
scaleFactor = 0.08,
|
|
rotationFactor = 5,
|
|
animationDuration = 500,
|
|
ariaLabel,
|
|
}) => {
|
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
const { transform } = useCardAnimation({
|
|
containerRef,
|
|
cardsOffset,
|
|
scaleFactor,
|
|
rotationFactor,
|
|
animationDuration,
|
|
});
|
|
|
|
const childArray = React.Children.toArray(children);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className={`relative w-full h-full ${className}`}
|
|
aria-label={ariaLabel}
|
|
>
|
|
{childArray.map((child, index) => {
|
|
const depth = index;
|
|
const scale = 1 - scaleFactor * depth;
|
|
const yOffset = depth * cardsOffset;
|
|
const rotation = depth * rotationFactor;
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="absolute w-full transition-transform"
|
|
style={{
|
|
transform: `translateY(${yOffset}px) scale(${scale}) rotateZ(${rotation}deg)`,
|
|
zIndex: childArray.length - index,
|
|
}}
|
|
>
|
|
{child}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CardStack;
|