From f9df5cbce7db38ce83cc8b40346c9cabde5debc4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 20 Dec 2021 19:03:17 +0100
Subject: chore: add a button to open/close search in toolbar

---
 .../Buttons/ButtonSearch/ButtonSearch.tsx          | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/Buttons/ButtonSearch/ButtonSearch.tsx

(limited to 'src/components/Buttons/ButtonSearch/ButtonSearch.tsx')

diff --git a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
new file mode 100644
index 0000000..a2635aa
--- /dev/null
+++ b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
@@ -0,0 +1,41 @@
+import CloseIcon from '@assets/images/icon-close.svg';
+import SearchIcon from '@assets/images/icon-search.svg';
+import { t } from '@lingui/macro';
+import { SetStateAction } from 'react';
+import styles from '../Buttons.module.scss';
+
+const ButtonSearch = ({
+  isActivated,
+  setIsActivated,
+}: {
+  isActivated: boolean;
+  setIsActivated: (value: SetStateAction<boolean>) => void;
+}) => {
+  const btnClasses = isActivated
+    ? `${styles.search} ${styles['search--opened']}`
+    : styles.search;
+
+  return (
+    <button
+      className={btnClasses}
+      type="button"
+      onClick={() => setIsActivated(!isActivated)}
+    >
+      <span className={styles.icon}>
+        <span className={styles.front}>
+          <SearchIcon />
+        </span>
+        <span className={styles.back}>
+          <CloseIcon />
+        </span>
+      </span>
+      {isActivated ? (
+        <span className="screen-reader-text">{t`Close search`}</span>
+      ) : (
+        <span className="screen-reader-text">{t`Open search`}</span>
+      )}
+    </button>
+  );
+};
+
+export default ButtonSearch;
-- 
cgit v1.2.3