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

A flexible and customizable story card component with multiple layouts

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const FlipCard = ({
  frontContent,
  backContent,
  className = '',
  flipDirection = 'horizontal',
  autoFlip = false,
  autoFlipInterval = 5000,
  children,
  ...props
}) => {
  const [isFlipped, setIsFlipped] = useState(false);

  React.useEffect(() => {
    if (autoFlip) {
      const interval = setInterval(() => {
        setIsFlipped(prev => !prev);
      }, autoFlipInterval);

      return () => clearInterval(interval);
    }
  }, [autoFlip, autoFlipInterval]);

  const handleClick = () => {
    if (!autoFlip) {
      setIsFlipped(prev => !prev);
    }
  };

  const flipClass = `story-card-flip story-card-flip--${flipDirection}`;
  const flippedClass = isFlipped ? 'story-card-flip--flipped' : '';
  
  const flipClasses = [
    flipClass,
    flippedClass,
    className
  ].filter(Boolean).join(' ');

  return (
    <div 
      className={flipClasses}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          handleClick();
        }
      }}
      {...props}
    >
      <div className="story-card-flip__inner">
        <div className="story-card-flip__front">
          {frontContent}
        </div>
        <div className="story-card-flip__back">
          {backContent}
        </div>
      </div>
      {children}
    </div>
  );
};

FlipCard.propTypes = {
  frontContent: PropTypes.node.isRequired,
  backContent: PropTypes.node.isRequired,
  className: PropTypes.string,
  flipDirection: PropTypes.oneOf(['horizontal', 'vertical']),
  autoFlip: PropTypes.bool,
  autoFlipInterval: PropTypes.number,
  children: PropTypes.node
};

export default FlipCard;