]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/techniques/Outline.js
svg dungeon tracker
[alttp.git] / resources / js / components / techniques / Outline.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { ListGroup } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
5
6 import { getTranslation } from '../../helpers/Technique';
7 import i18n from '../../i18n';
8
9 const Outline = ({ technique }) => technique.chapters && technique.chapters.length ?
10         <aside className="tech-outline mb-3 ms-3">
11                 <ListGroup>
12                         {technique.chapters.map(chapter => chapter.pivot.level ?
13                                 <ListGroup.Item
14                                         action
15                                         href={`#c${chapter.id}`}
16                                         key={`c${chapter.id}`}
17                                         title={getTranslation(chapter, 'short', i18n.language) || null}
18                                 >
19                                         {getTranslation(chapter, 'title', i18n.language)}
20                                 </ListGroup.Item>
21                         : null)}
22                 </ListGroup>
23         </aside>
24 : null;
25
26 Outline.propTypes = {
27         technique: PropTypes.shape({
28                 chapters: PropTypes.arrayOf(PropTypes.shape({
29                 })),
30         }),
31 };
32
33 export default withTranslation()(Outline);