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 { getTranslation } from '../../helpers/Technique';
   8 import i18n from '../../i18n';
   9
  10 const Detail = ({ technique }) => <Container as="article">
  11         <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
  12         <Outline technique={technique} />
  13         <div dangerouslySetInnerHTML={{
  14                 __html: getTranslation(technique, 'description', i18n.language),
  15         }} />
  16         {technique.chapters ? technique.chapters.map(chapter =>
  17                 <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
  18                         {chapter.pivot.level ?
  19                                 React.createElement(
  20                                         `h${chapter.pivot.level}`,
  21                                         {},
  22                                         getTranslation(chapter, 'title', i18n.language),
  23                                 )
  24                         : null}
  25                         <div dangerouslySetInnerHTML={{
  26                                 __html: getTranslation(chapter, 'description', i18n.language),
  27                         }} />
  28                 </section>
  29         ) : null}
  30 </Container>;
  31
  32 Detail.propTypes = {
  33         technique: PropTypes.shape({
  34                 chapters: PropTypes.arrayOf(PropTypes.shape({
  35                 })),
  36                 description: PropTypes.string,
  37                 title: PropTypes.string,
  38         }),
  39 };
  40
  41 export default withTranslation()(Detail);