list items shown on map

[alttp.git] / resources / js / components / techniques / List.js

diff --git a/resources/js/components/techniques/List.js b/resources/js/components/techniques/List.js
index 0549cd38bc0642d981285388b98cb265129e5e2f..aa80836c562098cefc3e5303ed8466b2bafcb941 100644 (file)
--- a/resources/js/components/techniques/List.js
+++ b/resources/js/components/techniques/List.js
@@ -2,18 +2,27 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { getTranslation } from '../../helpers/Technique';
+import Rulesets from './Rulesets';
+import {
+       getLink,
+       getTranslation,
+} from '../../helpers/Technique';
 import i18n from '../../i18n';
 
 const List = ({ techniques }) => <ul className="tech-list">
        {techniques.map(tech =>
-               <li key={tech.id}>
-                       <h2>
-                               <Link to={`/tech/${tech.name}`}>
-                                       {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>;