X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftechniques%2FDetail.js;fp=resources%2Fjs%2Fcomponents%2Ftechniques%2FDetail.js;h=d955397399668d86d2d030f01c9cb2de8fb6d3b0;hb=6f34dd7c00bf0bd152a97b175390be00c3a0ba31;hp=d586a9a159375e544d8b4f4bb0b04d8b3eb2299b;hpb=7e8555cfc96dcd364ca4fe9895e51af1bb04b546;p=alttp.git

diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js
index d586a9a..d955397 100644
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -1,19 +1,30 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Container } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
 
 import Outline from './Outline';
+import { getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
 
 const Detail = ({ technique }) => <Container as="article">
-	<h1>{technique.title}</h1>
+	<h1>{getTranslation(technique, 'title', i18n.language)}</h1>
 	<Outline technique={technique} />
-	<div dangerouslySetInnerHTML={{ __html: technique.description }} />
+	<div dangerouslySetInnerHTML={{
+		__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}`, {}, chapter.title)
+				React.createElement(
+					`h${chapter.pivot.level}`,
+					{},
+					getTranslation(chapter, 'title', i18n.language),
+				)
 			: null}
-			<div dangerouslySetInnerHTML={{ __html: chapter.description }} />
+			<div dangerouslySetInnerHTML={{
+				__html: getTranslation(chapter, 'description', i18n.language),
+			}} />
 		</section>
 	) : null}
 </Container>;
@@ -27,4 +38,4 @@ Detail.propTypes = {
 	}),
 };
 
-export default Detail;
+export default withTranslation()(Detail);