1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Alert, Container } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
6 import List from './List';
7 import Outline from './Outline';
8 import Requirements from './Requirements';
9 import Rulesets from './Rulesets';
10 import RawHTML from '../common/RawHTML';
16 } from '../../helpers/Technique';
17 import i18n from '../../i18n';
19 const Detail = ({ technique }) => <Container as="article">
20 <div className="d-flex align-items-center justify-content-between">
21 <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
22 {technique && technique.rulesets ?
23 <Rulesets technique={technique} />
26 <Outline technique={technique} />
27 <Requirements technique={technique} />
28 <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
29 {technique.chapters ? technique.chapters.map(chapter =>
30 <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
31 {chapter.pivot.level ?
33 `h${chapter.pivot.level}`,
35 getTranslation(chapter, 'title', i18n.language),
38 <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
41 {hasRelations(technique, 'related') ? <>
42 <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
43 <List techniques={sorted(getRelations(technique, 'related'))} />
45 {getTranslation(technique, 'attribution', i18n.language) ?
46 <Alert variant="dark">
47 <RawHTML html={getTranslation(technique, 'attribution', i18n.language)} />
53 technique: PropTypes.shape({
54 chapters: PropTypes.arrayOf(PropTypes.shape({
56 description: PropTypes.string,
57 rulesets: PropTypes.shape({
59 title: PropTypes.string,
63 export default withTranslation()(Detail);