]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/events/Item.js
compact keysanity tracker
[alttp.git] / resources / js / components / events / Item.js
1 import moment from 'moment';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { useTranslation } from 'react-i18next';
5 import { Link } from 'react-router-dom';
6
7 import RawHTML from '../common/RawHTML';
8 import {
9         getLink,
10 } from '../../helpers/Event';
11 import {
12         getTranslation,
13 } from '../../helpers/Technique';
14 import i18n from '../../i18n';
15
16 const Item = ({ event }) => {
17         const { t } = useTranslation();
18
19         const style = React.useMemo(() => {
20                 if (event && event.corner) {
21                         return {
22                                 backgroundImage: `url(${event.corner})`,
23                         };
24                 }
25                 return null;
26         }, [event && event.corner]);
27
28         return <li className="events-item my-3 p-2 pb-5 border rounded" style={style}>
29                 <h3>
30                         <Link to={getLink(event)}>
31                                 {(event.description && getTranslation(event.description, 'title', i18n.language))
32                                         || event.title}
33                         </Link>
34                 </h3>
35                 <div className="d-flex align-items-start justify-content-start">
36                         {event.start || event.end ?
37                                 <div className="event-pane">
38                                         {event.start ? <>
39                                                 <div><small>{t('events.start')}</small></div>
40                                                 <div className="mb-2">{moment(event.start).format('LL')}</div>
41                                         </> : null}
42                                         {event.end ? <>
43                                                 <div><small>{t('events.end')}</small></div>
44                                                 <div className="mb-2">{moment(event.end).format('LL')}</div>
45                                         </> : null}
46                                 </div>
47                         : null}
48                         {event.description?
49                                 <div>
50                                         <RawHTML
51                                                 html={getTranslation(event.description, 'description', i18n.language)}
52                                         />
53                                 </div>
54                         : null}
55                 </div>
56         </li>;
57 };
58
59 Item.propTypes = {
60         event: PropTypes.shape({
61                 corner: PropTypes.string,
62                 description: PropTypes.shape({
63                 }),
64                 end: PropTypes.string,
65                 id: PropTypes.number,
66                 name: PropTypes.string,
67                 start: PropTypes.string,
68                 title: PropTypes.string,
69         }),
70 };
71
72 export default Item;