src/components/snippets/Placeholder/components/List/List.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { ListGroup, ListGroupItem } from 'reactstrap';
import { mapToNumOrStr } from '../../utils';

function List({ paragraphs, rows, avatar }) {
  const renderParagraphs = () => (
    <div className="n2o-placeholder-content item" />
  );

  const renderAvatar = <div className="n2o-placeholder-content avatar" />;

  const renderListItem = () => (
    <ListGroupItem className="n2o-placeholder-list">
      {avatar && renderAvatar}
      {mapToNumOrStr(paragraphs, renderParagraphs)}
    </ListGroupItem>
  );

  return <ListGroup>{mapToNumOrStr(rows, renderListItem)}</ListGroup>;
}

List.propTypes = {
  rows: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
  paragraphs: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
  avatar: PropTypes.bool,
};

List.defaultProps = {
  rows: 1,
  paragraphs: 2,
  avatar: false,
};

export default List;