]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/events/Detail.js
svg dungeon tracker
[alttp.git] / resources / js / components / events / Detail.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Alert, Button } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 import Icon from '../common/Icon';
7 import RawHTML from '../common/RawHTML';
8 import { hasConcluded } from '../../helpers/Event';
9 import { getTranslation } from '../../helpers/Technique';
10 import i18n from '../../i18n';
11
12 const Detail = ({ actions, event }) => {
13         const { t } = useTranslation();
14
15         return <>
16                 <div className="d-flex align-items-center justify-content-between">
17                         <h1>
18                                 {(event.description && getTranslation(event.description, 'title', i18n.language))
19                                         || event.title}
20                         </h1>
21                         {event.description && actions.editContent ?
22                                 <Button
23                                         className="ms-3"
24                                         onClick={() => actions.editContent(event.description)}
25                                         size="sm"
26                                         title={t('button.edit')}
27                                         variant="outline-secondary"
28                                 >
29                                         <Icon.EDIT title="" />
30                                 </Button>
31                         : null}
32                 </div>
33                 {event.description ?
34                         <RawHTML html={getTranslation(event.description, 'description', i18n.language)} />
35                 : null}
36                 {hasConcluded(event) ?
37                         <Alert variant="info">
38                                 {t('events.concluded')}
39                         </Alert>
40                 : null}
41         </>;
42 };
43
44 Detail.propTypes = {
45         actions: PropTypes.shape({
46                 editContent: PropTypes.func,
47         }),
48         event: PropTypes.shape({
49                 description: PropTypes.shape({
50                 }),
51                 end: PropTypes.string,
52                 title: PropTypes.string,
53         }),
54 };
55
56 export default Detail;