story-az-card-kit/src/layouts/VerticalCard.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 VerticalCard = ({
  title,
  description,
  image,
  author,
  date,
  tags = [],
  theme = 'default',
  onClick,
  className = '',
  imageHeight = 'auto',
  children,
  ...props
}) => {
  const heightClass = imageHeight !== 'auto' ? `story-card--vertical-${imageHeight}` : '';
  
  return (
    <StoryCard
      title={title}
      description={description}
      image={image}
      author={author}
      date={date}
      tags={tags}
      layout="vertical"
      theme={theme}
      onClick={onClick}
      className={`${heightClass} ${className}`}
      {...props}
    >
      {children}
    </StoryCard>
  );
};

VerticalCard.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  image: PropTypes.string,
  author: PropTypes.string,
  date: PropTypes.string,
  tags: PropTypes.arrayOf(PropTypes.string),
  theme: PropTypes.oneOf(['default', 'dark', 'minimal', 'elegant', 'modern']),
  onClick: PropTypes.func,
  className: PropTypes.string,
  imageHeight: PropTypes.oneOf(['auto', 'small', 'medium', 'large']),
  children: PropTypes.node
};

export default VerticalCard;