X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftechniques%2FDetail.js;h=376a391698d108addcae83a51bed98b7aac77488;hb=8c8219f8c3d6beb4bab030f9b50caeb0eeffc32a;hp=488205b2e6d68ffdd374ae93d78a5b0cfe704b6b;hpb=0586e04204885088f31ac9861446eb0759cc8d2f;p=alttp.git diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js index 488205b..376a391 100644 --- a/resources/js/components/techniques/Detail.js +++ b/resources/js/components/techniques/Detail.js @@ -1,11 +1,15 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { Container } from 'react-bootstrap'; -import { withTranslation } from 'react-i18next'; +import { Alert, Button, Container } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; import List from './List'; import Outline from './Outline'; +import Requirements from './Requirements'; +import Rulesets from './Rulesets'; +import Icon from '../common/Icon'; import RawHTML from '../common/RawHTML'; +import nl2br from '../../helpers/nl2br'; import { getRelations, getTranslation, @@ -14,35 +18,79 @@ import { } from '../../helpers/Technique'; import i18n from '../../i18n'; -const Detail = ({ technique }) => -

{getTranslation(technique, 'title', i18n.language)}

- - - {technique.chapters ? technique.chapters.map(chapter => -
- {chapter.pivot.level ? - React.createElement( - `h${chapter.pivot.level}`, - {}, - getTranslation(chapter, 'title', i18n.language), - ) +const Detail = ({ actions, technique }) => { + const { t } = useTranslation(); + + return +
+

+ {getTranslation(technique, 'title', i18n.language)} + {actions.editContent ? + + : null} +

+ {technique && technique.rulesets ? + : null} - -
- ) : null} - {hasRelations(technique, 'related') ? <> -

{i18n.t('techniques.seeAlso')}

- - : null} -
; + + + + + {technique.chapters ? technique.chapters.map(chapter => +
+ {chapter.pivot.level ? + React.createElement( + `h${chapter.pivot.level}`, + {}, + getTranslation(chapter, 'title', i18n.language), + actions.editContent ? + + : null, + ) + : null} + +
+ ) : null} + {hasRelations(technique, 'related') ? <> +

{i18n.t('techniques.seeAlso')}

+ + : null} + {getTranslation(technique, 'attribution', i18n.language) ? + + {nl2br(getTranslation(technique, 'attribution', i18n.language))} + + : null} + ; +}; Detail.propTypes = { + actions: PropTypes.shape({ + editContent: PropTypes.func, + }), technique: PropTypes.shape({ chapters: PropTypes.arrayOf(PropTypes.shape({ })), description: PropTypes.string, + rulesets: PropTypes.shape({ + }), title: PropTypes.string, }), }; -export default withTranslation()(Detail); +export default Detail;