X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftechniques%2FDetail.js;h=376a391698d108addcae83a51bed98b7aac77488;hb=13ffde5b2abcf831af9c794044350737066c5933;hp=665392365b40120b0c9834fa01eeb5d7d145b7d2;hpb=de9be1288c2b3214e007c8d67d6b19e756cf08ba;p=alttp.git

diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js
index 6653923..376a391 100644
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -1,12 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Container } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
 import List from './List';
 import Outline from './Outline';
+import Requirements from './Requirements';
 import Rulesets from './Rulesets';
+import Icon from '../common/Icon';
 import RawHTML from '../common/RawHTML';
+import nl2br from '../../helpers/nl2br';
 import {
 	getRelations,
 	getTranslation,
@@ -15,34 +18,71 @@ import {
 } from '../../helpers/Technique';
 import i18n from '../../i18n';
 
-const Detail = ({ technique }) => <Container as="article">
-	<div className="d-flex align-items-center justify-content-between">
-		<h1>{getTranslation(technique, 'title', i18n.language)}</h1>
-		{technique && technique.rulesets ?
-			<Rulesets technique={technique} />
-		: null}
-	</div>
-	<Outline technique={technique} />
-	<RawHTML html={getTranslation(technique, 'description', i18n.language)} />
-	{technique.chapters ? technique.chapters.map(chapter =>
-		<section id={`c${chapter.id}`} key={`c${chapter.id}`}>
-			{chapter.pivot.level ?
-				React.createElement(
-					`h${chapter.pivot.level}`,
-					{},
-					getTranslation(chapter, 'title', i18n.language),
-				)
+const Detail = ({ actions, technique }) => {
+	const { t } = useTranslation();
+
+	return <Container as="article">
+		<div className="d-flex align-items-center justify-content-between">
+			<h1>
+				{getTranslation(technique, 'title', i18n.language)}
+				{actions.editContent ?
+					<Button
+						className="ms-3"
+						onClick={() => actions.editContent(technique)}
+						size="sm"
+						title={t('button.edit')}
+						variant="outline-secondary"
+					>
+						<Icon.EDIT title="" />
+					</Button>
+				: null}
+			</h1>
+			{technique && technique.rulesets ?
+				<Rulesets technique={technique} />
 			: null}
-			<RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
-		</section>
-	) : null}
-	{hasRelations(technique, 'related') ? <>
-		<h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
-		<List techniques={sorted(getRelations(technique, 'related'))} />
-	</> : null}
-</Container>;
+		</div>
+		<Outline technique={technique} />
+		<Requirements technique={technique} />
+		<RawHTML html={getTranslation(technique, 'description', i18n.language)} />
+		{technique.chapters ? technique.chapters.map(chapter =>
+			<section id={`c${chapter.id}`} key={`c${chapter.id}`}>
+				{chapter.pivot.level ?
+					React.createElement(
+						`h${chapter.pivot.level}`,
+						{},
+						getTranslation(chapter, 'title', i18n.language),
+						actions.editContent ?
+							<Button
+								className="ms-3"
+								onClick={() => actions.editContent(chapter)}
+								size="sm"
+								title={t('button.edit')}
+								variant="outline-secondary"
+							>
+								<Icon.EDIT title="" />
+							</Button>
+						: null,
+					)
+				: null}
+				<RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
+			</section>
+		) : null}
+		{hasRelations(technique, 'related') ? <>
+			<h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
+			<List techniques={sorted(getRelations(technique, 'related'))} />
+		</> : null}
+		{getTranslation(technique, 'attribution', i18n.language) ?
+			<Alert variant="dark">
+				{nl2br(getTranslation(technique, 'attribution', i18n.language))}
+			</Alert>
+		: null}
+	</Container>;
+};
 
 Detail.propTypes = {
+	actions: PropTypes.shape({
+		editContent: PropTypes.func,
+	}),
 	technique: PropTypes.shape({
 		chapters: PropTypes.arrayOf(PropTypes.shape({
 		})),
@@ -53,4 +93,4 @@ Detail.propTypes = {
 	}),
 };
 
-export default withTranslation()(Detail);
+export default Detail;