]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/techniques/Detail.js
d586a9a159375e544d8b4f4bb0b04d8b3eb2299b
[alttp.git] / 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;