1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Alert, Button, Container } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
6 import List from './List';
7 import Outline from './Outline';
8 import Requirements from './Requirements';
9 import Rulesets from './Rulesets';
10 import Icon from '../common/Icon';
11 import RawHTML from '../common/RawHTML';
17 } from '../../helpers/Technique';
18 import i18n from '../../i18n';
20 const Detail = ({ actions, technique }) => {
21 const { t } = useTranslation();
23 return <Container as="article">
24 <div className="d-flex align-items-center justify-content-between">
26 {getTranslation(technique, 'title', i18n.language)}
27 {actions.editContent ?
30 onClick={() => actions.editContent(technique)}
32 title={t('button.edit')}
33 variant="outline-secondary"
35 <Icon.EDIT title="" />
39 {technique && technique.rulesets ?
40 <Rulesets technique={technique} />
43 <Outline technique={technique} />
44 <Requirements technique={technique} />
45 <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
46 {technique.chapters ? technique.chapters.map(chapter =>
47 <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
48 {chapter.pivot.level ?
50 `h${chapter.pivot.level}`,
52 getTranslation(chapter, 'title', i18n.language),
56 onClick={() => actions.editContent(chapter)}
58 title={t('button.edit')}
59 variant="outline-secondary"
61 <Icon.EDIT title="" />
66 <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
69 {hasRelations(technique, 'related') ? <>
70 <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
71 <List techniques={sorted(getRelations(technique, 'related'))} />
73 {getTranslation(technique, 'attribution', i18n.language) ?
74 <Alert variant="dark">
75 <RawHTML html={getTranslation(technique, 'attribution', i18n.language)} />
82 actions: PropTypes.shape({
83 editContent: PropTypes.func,
85 technique: PropTypes.shape({
86 chapters: PropTypes.arrayOf(PropTypes.shape({
88 description: PropTypes.string,
89 rulesets: PropTypes.shape({
91 title: PropTypes.string,
95 export default Detail;