resources/js/components/techniques/Detail.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Container } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import Outline from './Outline';
   7 import RawHTML from '../common/RawHTML';
   8 import { getTranslation } from '../../helpers/Technique';
   9 import i18n from '../../i18n';
  10
  11 const Detail = ({ technique }) => <Container as="article">
  12         <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
  13         <Outline technique={technique} />
  14         <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
  15         {technique.chapters ? technique.chapters.map(chapter =>
  16                 <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
  17                         {chapter.pivot.level ?
  18                                 React.createElement(
  19                                         `h${chapter.pivot.level}`,
  20                                         {},
  21                                         getTranslation(chapter, 'title', i18n.language),
  22                                 )
  23                         : null}
  24                         <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
  25                 </section>
  26         ) : null}
  27 </Container>;
  28
  29 Detail.propTypes = {
  30         technique: PropTypes.shape({
  31                 chapters: PropTypes.arrayOf(PropTypes.shape({
  32                 })),
  33                 description: PropTypes.string,
  34                 title: PropTypes.string,
  35         }),
  36 };
  37
  38 export default withTranslation()(Detail);