From f51929c6244c8b8672b9d1d10775ec3e921c3f5c Mon Sep 17 00:00:00 2001
From: Richard <richard@protonmail.com>
Date: Tue, 16 Apr 2019 14:51:55 +0200
Subject: [PATCH] Start search section

---
 containers/search/EncryptedSearchToggle.js | 18 ++++++++++++++
 containers/search/ExactMatchToggle.js      | 18 ++++++++++++++
 containers/search/SearchSection.js         | 28 ++++++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 containers/search/EncryptedSearchToggle.js
 create mode 100644 containers/search/ExactMatchToggle.js
 create mode 100644 containers/search/SearchSection.js

diff --git a/containers/search/EncryptedSearchToggle.js b/containers/search/EncryptedSearchToggle.js
new file mode 100644
index 000000000..29d19236e
--- /dev/null
+++ b/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;
diff --git a/containers/search/ExactMatchToggle.js b/containers/search/ExactMatchToggle.js
new file mode 100644
index 000000000..c20fa8880
--- /dev/null
+++ b/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;
diff --git a/containers/search/SearchSection.js b/containers/search/SearchSection.js
new file mode 100644
index 000000000..6f1a0642d
--- /dev/null
+++ b/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;