{"size": 1210, "ext": "js", "max_stars_repo_path": "src/common/card/ImageCardGroup.js", "max_stars_repo_name": "MikeBLambert/themikelambert", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/common/card/ImageCardGroup.js", "max_issues_repo_name": "MikeBLambert/themikelambert", "max_issues_repo_issues_event_min_datetime": "2020-07-17T15:34:09.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T14:42:42.000Z", "max_forks_repo_path": "src/common/card/ImageCardGroup.js", "max_forks_repo_name": "MikeBLambert/themikelambert", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 24.2, "max_line_length": 77, "alphanum_fraction": 0.6115702479}
import React from 'react';
import { arrayOf, object, string, func } from 'prop-types';
import styles from './ImageCardGroup.module.css';
import ImageCardLabel from '../text/ImageCardLabel';

const ImageCardGroup = ({
  data,
  cardWidth,
  cardHeight,
  getAosEffect,
  getImageStyle,
  getTitle,
}) => {
  if (!data) return;
  return (
    <div className={styles.imageCardContainer}>
      {data.map(({ title, file }, index) => (
        <div
          key={title}
          style={{ height: cardHeight, width: cardWidth }}
          className={styles.imageCard}
          data-aos={getAosEffect({ index })}
        >
          <img src={file.url} style={getImageStyle({ title })} />
          <ImageCardLabel>{getTitle({ title })}</ImageCardLabel>
        </div>
      ))}
    </div>
  );
};

ImageCardGroup.propTypes = {
  cardHeight: string,
  cardWidth: string,
  data: arrayOf(object),
  getImageStyle: func,
  getTitle: func,
};

ImageCardGroup.defaultProps = {
  cardHeight: '175px',
  cardWidth: '150px',
  data: [],
  getDataAosEffect: () => 'fade-in',
  getImageStyle: () => ({ width: '100px', paddingTop: '20px', margin: '0' }),
  getTitle: ({ title }) => title,
};

export default ImageCardGroup;
