X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fevents%2FDetail.js;fp=resources%2Fjs%2Fcomponents%2Fevents%2FDetail.js;h=3626fbd4cc4db9e390fbc9d7d64d227b167707b7;hb=0a2bb2069cee683d525596dfe0141cac60f0f977;hp=0000000000000000000000000000000000000000;hpb=7ec9287d3114e88c92cd2b480d89a408045cb79c;p=alttp.git

diff --git a/resources/js/components/events/Detail.js b/resources/js/components/events/Detail.js
new file mode 100644
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;