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;