WIP - Encrypted search section

containers/search/EncryptedSearchToggle.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Toggle, useToggle } from 'react-components';
+
+const EncryptedSearchToggle = ({ id }) => {
+    const { state, toggle } = useToggle(); // TODO set default
+    const handleChange = () => {
+        // TODO
+        toggle();
+    };
+    return <Toggle id={id} checked={state} onChange={handleChange} />;
+};
+
+EncryptedSearchToggle.propTypes = {
+    id: PropTypes.string
+};
+
+export default EncryptedSearchToggle;

containers/search/ExactMatchToggle.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Toggle, useToggle } from 'react-components';
+
+const ExactMatchToggle = ({ id }) => {
+    const { state, toggle } = useToggle(); // TODO set default
+    const handleChange = () => {
+        // TODO
+        toggle();
+    };
+    return <Toggle id={id} checked={state} onChange={handleChange} />;
+};
+
+ExactMatchToggle.propTypes = {
+    id: PropTypes.string
+};
+
+export default ExactMatchToggle;

containers/search/SearchSection.js

@@ -0,0 +1,28 @@
+import { c } from 'ttag';
+import React from 'react';
+import { SubTitle, Info, Row, Label } from 'react-components';
+
+import ExactMatchToggle from './ExactMatchToggle';
+import EncryptedSearchToggle from './EncryptedSearchToggle';
+
+const SearchSection = () => {
+    return (
+        <>
+            <SubTitle>{c('Title').t`Search`}</SubTitle>
+            <Row>
+                <Label htmlFor="exactMatch">
+                    {c('Label').t`Require exact match`} <Info url="TODO" />
+                </Label>
+                <ExactMatchToggle id="exactMatch" />
+            </Row>
+            <Row>
+                <Label htmlFor="encryptedSearch">
+                    {c('Label').t`Encrypted search`} <Info url="TODO" />
+                </Label>
+                <EncryptedSearchToggle id="encryptedSearch" />
+            </Row>
+        </>
+    );
+};
+
+export default SearchSection;