resources/js/components/events/Detail.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { 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 { getTranslation } from '../../helpers/Technique';
   9 import i18n from '../../i18n';
  10
  11 const Detail = ({ actions, event }) => {
  12         const { t } = useTranslation();
  13
  14         return <>
  15                 <div className="d-flex align-items-center justify-content-between">
  16                         <h1>
  17                                 {(event.description && getTranslation(event.description, 'title', i18n.language))
  18                                         || event.title}
  19                         </h1>
  20                         {event.description && actions.editContent ?
  21                                 <Button
  22                                         className="ms-3"
  23                                         onClick={() => actions.editContent(event.description)}
  24                                         size="sm"
  25                                         title={t('button.edit')}
  26                                         variant="outline-secondary"
  27                                 >
  28                                         <Icon.EDIT title="" />
  29                                 </Button>
  30                         : null}
  31                 </div>
  32                 {event.description ?
  33                         <RawHTML html={getTranslation(event.description, 'description', i18n.language)} />
  34                 : null}
  35         </>;
  36 };
  37
  38 Detail.propTypes = {
  39         actions: PropTypes.shape({
  40                 editContent: PropTypes.func,
  41         }),
  42         event: PropTypes.shape({
  43                 description: PropTypes.shape({
  44                 }),
  45                 title: PropTypes.string,
  46         }),
  47 };
  48
  49 export default Detail;