allow filtering of techniques by ruleset

[alttp.git] / resources / js / components / techniques / Overview.js

diff --git a/resources/js/components/techniques/Overview.js b/resources/js/components/techniques/Overview.js
index 16868655b12fe473a2f7425415939504fa914a74..f82a8777ab3e4725c6fe2b58fbd1575188ab2d89 100644 (file)
--- a/resources/js/components/techniques/Overview.js
+++ b/resources/js/components/techniques/Overview.js
@@ -4,20 +4,32 @@ import { Container } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
 import List from './List';
+import TechFilter from './TechFilter';
 import i18n from '../../i18n';
 
 const Overview = ({
+       filter,
        namespace,
+       setFilter,
        techniques,
+       type,
 }) => <Container>
-       <h1>{i18n.t(`${namespace}.heading`)}</h1>
+       <div className="d-flex align-items-center justify-content-between">
+               <h1>{i18n.t(`${namespace}.heading`)}</h1>
+               {type === 'tech' ?
+                       <TechFilter filter={filter} setFilter={setFilter} />
+               : null}
+       </div>
        <List techniques={techniques} />
 </Container>;
 
 Overview.propTypes = {
+       filter: PropTypes.shape({}),
        namespace: PropTypes.string,
+       setFilter: PropTypes.func,
        techniques: PropTypes.arrayOf(PropTypes.shape({
        })),
+       type: PropTypes.string,
 };
 
 export default withTranslation()(Overview);