import React from 'react';
import { Link } from 'react-router-dom';
+import Rulesets from './Rulesets';
import {
getLink,
getTranslation,
const List = ({ techniques }) => <ul className="tech-list">
{techniques.map(tech =>
- <li key={tech.id}>
- <h2>
- <Link to={getLink(tech)}>
- {getTranslation(tech, 'title', i18n.language)}
- </Link>
- </h2>
- <p>{getTranslation(tech, 'short', i18n.language)}</p>
+ <li className="d-flex align-items-start justify-content-between" key={tech.id}>
+ <div>
+ <h2>
+ <Link to={getLink(tech)}>
+ {getTranslation(tech, 'title', i18n.language)}
+ </Link>
+ </h2>
+ <p>{getTranslation(tech, 'short', i18n.language)}</p>
+ </div>
+ {tech.rulesets ?
+ <Rulesets technique={tech} />
+ : null}
</li>
)}
</ul>;