resources/js/components/techniques/Detail.js

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