1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Container } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
6 import List from './List';
7 import Outline from './Outline';
8 import RawHTML from '../common/RawHTML';
14 } from '../../helpers/Technique';
15 import i18n from '../../i18n';
17 const Detail = ({ technique }) => <Container as="article">
18 <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
19 <Outline technique={technique} />
20 <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
21 {technique.chapters ? technique.chapters.map(chapter =>
22 <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
23 {chapter.pivot.level ?
25 `h${chapter.pivot.level}`,
27 getTranslation(chapter, 'title', i18n.language),
30 <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
33 {hasRelations(technique, 'related') ? <>
34 <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
35 <List techniques={sorted(getRelations(technique, 'related'))} />
40 technique: PropTypes.shape({
41 chapters: PropTypes.arrayOf(PropTypes.shape({
43 description: PropTypes.string,
44 title: PropTypes.string,
48 export default withTranslation()(Detail);