event details

[alttp.git] / resources / js / components / events / Detail.js

diff --git a/resources/js/components/events/Detail.js b/resources/js/components/events/Detail.js
new file mode 100644 (file)
index 0000000..3626fbd
--- /dev/null
+++ b/resources/js/components/events/Detail.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+import RawHTML from '../common/RawHTML';
+import { getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
+
+const Detail = ({ actions, event }) => {
+       const { t } = useTranslation();
+
+       return <>
+               <div className="d-flex align-items-center justify-content-between">
+                       <h1>{event.title}</h1>
+                       {event.description && actions.editContent ?
+                               <Button
+                                       className="ms-3"
+                                       onClick={() => actions.editContent(event.description)}
+                                       size="sm"
+                                       title={t('button.edit')}
+                                       variant="outline-secondary"
+                               >
+                                       <Icon.EDIT title="" />
+                               </Button>
+                       : null}
+               </div>
+               {event.description ?
+                       <RawHTML html={getTranslation(event.description, 'description', i18n.language)} />
+               : null}
+       </>;
+};
+
+Detail.propTypes = {
+       actions: PropTypes.shape({
+               editContent: PropTypes.func,
+       }),
+       event: PropTypes.shape({
+               description: PropTypes.shape({
+               }),
+               title: PropTypes.string,
+       }),
+};
+
+export default Detail;