story-az-card-kit/src/layouts/HorizontalCard.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 HorizontalCard = ({
  title,
  description,
  image,
  author,
  date,
  tags = [],
  theme = 'default',
  onClick,
  className = '',
  imagePosition = 'left',
  children,
  ...props
}) => {
  const positionClass = `story-card--horizontal-${imagePosition}`;
  
  return (
    <StoryCard
      title={title}
      description={description}
      image={image}
      author={author}
      date={date}
      tags={tags}
      layout="horizontal"
      theme={theme}
      onClick={onClick}
      className={`${positionClass} ${className}`}
      {...props}
    >
      {children}
    </StoryCard>
  );
};

HorizontalCard.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,
  imagePosition: PropTypes.oneOf(['left', 'right']),
  children: PropTypes.node
};

export default HorizontalCard;