]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/map/Popover.js
compact keysanity tracker
[alttp.git] / resources / js / components / map / Popover.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Card, ListGroup } from 'react-bootstrap';
4 import { Link } from 'react-router-dom';
5
6 import ZeldaIcon from '../common/ZeldaIcon';
7
8 import {
9         getLink,
10         getRelations,
11         getTranslation,
12         hasRelations,
13         sorted,
14 } from '../../helpers/Technique';
15 import i18n from '../../i18n';
16
17 const Popover = ({ show, technique }) =>
18         <div className={`map-popover ${show ? 'shown' : 'hidden'}`}>
19                 <Card bg="dark">
20                         <Card.Header>
21                                 <Card.Title>
22                                         {getTranslation(technique, 'title', i18n.language)}
23                                 </Card.Title>
24                         </Card.Header>
25                         {technique.short ?
26                                 <Card.Body>
27                                         <Card.Text>
28                                                 {getTranslation(technique, 'short', i18n.language)}
29                                         </Card.Text>
30                                 </Card.Body>
31                         : null}
32                         {hasRelations(technique, 'related') ?
33                                 <ListGroup variant="flush">
34                                         {sorted(getRelations(technique, 'related')).map(r =>
35                                                 <ListGroup.Item
36                                                         key={r.id}
37                                                         title={getTranslation(r, 'short', i18n.language)}
38                                                 >
39                                                         <Link to={getLink(r)}>
40                                                                 {r.title_icons ?
41                                                                         <span className="tech-title-icons">
42                                                                                 {r.title_icons.map(icon =>
43                                                                                         <ZeldaIcon key={icon} name={icon} />
44                                                                                 )}
45                                                                         </span>
46                                                                 : null}
47                                                                 {getTranslation(r, 'title', i18n.language)}
48                                                         </Link>
49                                                 </ListGroup.Item>
50                                         )}
51                                 </ListGroup>
52                         : null}
53                 </Card>
54         </div>;
55
56 Popover.propTypes = {
57         show: PropTypes.bool,
58         technique: PropTypes.shape({
59                 short: PropTypes.string,
60         }),
61 };
62
63 export default Popover;