42 lines
881 B
TypeScript
42 lines
881 B
TypeScript
import React from 'react';
|
|
import useCardAnimation from '../../hooks/useCardAnimation';
|
|
|
|
interface GridLayoutProps {
|
|
items?: any[];
|
|
columns?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const GridLayout: React.FC<GridLayoutProps> = ({
|
|
items = [],
|
|
columns = 3,
|
|
className = '',
|
|
}) => {
|
|
const { transform } = useCardAnimation({ autoPlay: false });
|
|
|
|
return (
|
|
<div className={`grid-layout ${className}`}>
|
|
<div
|
|
className="grid-container"
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
gap: '1rem',
|
|
}}
|
|
>
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={item.id || index}
|
|
className="grid-item"
|
|
style={{ transform }}
|
|
>
|
|
{item.content}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GridLayout;
|