tech attribution & requirements

[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 665392365b40120b0c9834fa01eeb5d7d145b7d2..9d9534ed31f2d6831f883fa2ce043975e90958e7 100644 (file)
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Alert, Container } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
 import List from './List';
 import Outline from './Outline';
+import Requirements from './Requirements';
 import Rulesets from './Rulesets';
 import RawHTML from '../common/RawHTML';
 import {
@@ -23,6 +24,7 @@ const Detail = ({ technique }) => <Container as="article">
                : null}
        </div>
        <Outline technique={technique} />
+       <Requirements technique={technique} />
        <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
        {technique.chapters ? technique.chapters.map(chapter =>
                <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
@@ -40,6 +42,11 @@ const Detail = ({ technique }) => <Container as="article">
                <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
                <List techniques={sorted(getRelations(technique, 'related'))} />
        </> : null}
+       {getTranslation(technique, 'attribution', i18n.language) ?
+               <Alert variant="dark">
+                       <RawHTML html={getTranslation(technique, 'attribution', i18n.language)} />
+               </Alert>
+       : null}
 </Container>;
 
 Detail.propTypes = {