story-az-card-kit/src/layouts/GridCard.js

A flexible and customizable story card component with multiple layouts

import React from 'react';
import PropTypes from 'prop-types';
import StoryCard from '../components/StoryCard';

const GridCard = ({
  stories = [],
  columns = 3,
  gap = 'medium',
  theme = 'default',
  onCardClick,
  className = '',
  responsive = true,
  children,
  ...props
}) => {
  const gridClass = `story-card-grid story-card-grid--${columns}-cols story-card-grid--gap-${gap}`;
  const responsiveClass = responsive ? 'story-card-grid--responsive' : '';
  
  const gridClasses = [
    gridClass,
    responsiveClass,
    className
  ].filter(Boolean).join(' ');

  return (
    <div className={gridClasses} {...props}>
      {stories.map((story, index) => (
        <StoryCard
          key={index}
          {...story}
          theme={theme}
          onClick={onCardClick ? (e, data) => onCardClick(e, data, index) : undefined}
        />
      ))}
      {children}
    </div>
  );
};

GridCard.propTypes = {
  stories: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string,
    description: PropTypes.string,
    image: PropTypes.string,
    author: PropTypes.string,
    date: PropTypes.string,
    tags: PropTypes.arrayOf(PropTypes.string)
  })),
  columns: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
  gap: PropTypes.oneOf(['small', 'medium', 'large']),
  theme: PropTypes.oneOf(['default', 'dark', 'minimal', 'elegant', 'modern']),
  onCardClick: PropTypes.func,
  className: PropTypes.string,
  responsive: PropTypes.bool,
  children: PropTypes.node
};

export default GridCard;