resources/js/components/techniques/List.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Link } from 'react-router-dom';
   4
   5 import Rulesets from './Rulesets';
   6 import {
   7         getLink,
   8         getTranslation,
   9 } from '../../helpers/Technique';
  10 import i18n from '../../i18n';
  11
  12 const List = ({ techniques }) => <ul className="tech-list">
  13         {techniques.map(tech =>
  14                 <li className="d-flex align-items-start justify-content-between" key={tech.id}>
  15                         <div>
  16                                 <h2>
  17                                         <Link to={getLink(tech)}>
  18                                                 {getTranslation(tech, 'title', i18n.language)}
  19                                         </Link>
  20                                 </h2>
  21                                 <p>{getTranslation(tech, 'short', i18n.language)}</p>
  22                         </div>
  23                         {tech.rulesets ?
  24                                 <Rulesets technique={tech} />
  25                         : null}
  26                 </li>
  27         )}
  28 </ul>;
  29
  30 List.propTypes = {
  31         techniques: PropTypes.arrayOf(PropTypes.shape({
  32                 id: PropTypes.number,
  33                 name: PropTypes.string,
  34         })),
  35 };
  36
  37 export default List;