tech relations

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

diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js
index 303921c4c919245ed5c66da8e1a7f4357d976705..488205b2e6d68ffdd374ae93d78a5b0cfe704b6b 100644 (file)
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -3,9 +3,15 @@ import React from 'react';
 import { Container } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
+import List from './List';
 import Outline from './Outline';
 import RawHTML from '../common/RawHTML';
-import { getTranslation } from '../../helpers/Technique';
+import {
+       getRelations,
+       getTranslation,
+       hasRelations,
+       sorted,
+} from '../../helpers/Technique';
 import i18n from '../../i18n';
 
 const Detail = ({ technique }) => <Container as="article">
@@ -24,6 +30,10 @@ const Detail = ({ technique }) => <Container as="article">
                        <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
                </section>
        ) : null}
+       {hasRelations(technique, 'related') ? <>
+               <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
+               <List techniques={sorted(getRelations(technique, 'related'))} />
+       </> : null}
 </Container>;
 
 Detail.propTypes = {