27 lines
989 B
TypeScript
27 lines
989 B
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { GridLayoutProps } from '@/components/cardStack/types';
|
|
import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation';
|
|
|
|
const GridLayout: React.FC<GridLayoutProps> = ({ items, className = '' }) => {
|
|
const animation = useCardAnimation();
|
|
const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
|
|
|
|
return (
|
|
<div ref={animation.containerRef as React.Ref<HTMLDivElement>} className={`grid-layout ${className}`}>
|
|
<div ref={animation.perspectiveRef as React.Ref<HTMLDivElement>} className="grid-perspective">
|
|
<div ref={animation.bottomContentRef as React.Ref<HTMLDivElement>} className="grid-container">
|
|
{items.map((item, index) => (
|
|
<div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="grid-item">
|
|
{item.title}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GridLayout;
|