+import PropTypes from 'prop-types';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+
+const Rulesets = ({ technique }) => {
+ const { t } = useTranslation();
+
+ return <div className="ruleset-box">
+ {['competitive', 'owg', 'mg', 'nl'].map(r =>
+ <span key={r} title={t(`techniques.rulesetDescriptions.${r}`)}>
+ {technique && technique.rulesets && technique.rulesets[r] ?
+ <Icon.ALLOWED className="text-success" />
+ : null}
+ {technique && technique.rulesets && !technique.rulesets[r] ?
+ <Icon.FORBIDDEN className="text-danger" />
+ : null}
+ {!technique || !technique.rulesets ?
+ <Icon.UNKNOWN />
+ : null}
+ {' '}
+ {t(`techniques.rulesetCodes.${r}`)}
+ </span>
+ )}
+ </div>;
+};
+
+Rulesets.propTypes = {
+ technique: PropTypes.shape({
+ rulesets: PropTypes.shape({
+ }),
+ }),
+};
+
+export default Rulesets;