From 44ac4455b707b14aeebf0d6eef6408fe83749e09 Mon Sep 17 00:00:00 2001
From: Tobias Fried <friedtm@gmail.com>
Date: Fri, 17 Jul 2020 13:23:04 -0400
Subject: [PATCH] Toolbar: refactor from IconSearch and add 'size' and 'color'
 controls

---
 src/components/App/App.tsx               |  7 ++---
 src/components/IconSearch/IconSearch.tsx | 37 ------------------------
 src/components/index.ts                  |  2 +-
 3 files changed, 4 insertions(+), 42 deletions(-)
 delete mode 100644 src/components/IconSearch/IconSearch.tsx

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index dbd6f6f..fa77402 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,13 +1,12 @@
 import React from "react";
-import { IconSearch, IconGrid } from "../";
+import { Toolbar, IconGrid } from "../";
 
 const App = () => {
   return (
     <div>
       <header>
-        Phosphor Icons{" "}
+        <h1>Phosphor Icons</h1>
         <a
-          // className="App-link"
           href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
           target="_blank"
           rel="noopener noreferrer"
@@ -15,7 +14,7 @@ const App = () => {
           on the play store
         </a>
       </header>
-      <IconSearch />
+      <Toolbar />
       <IconGrid />
     </div>
   );
diff --git a/src/components/IconSearch/IconSearch.tsx b/src/components/IconSearch/IconSearch.tsx
deleted file mode 100644
index 5c9bdff..0000000
--- a/src/components/IconSearch/IconSearch.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import { useRecoilState } from "recoil";
-
-import { searchQueryAtom, styleQueryAtom } from "../../state/atoms";
-import { IconStyle } from "../../lib/Icon";
-
-type IconSearchProps = {};
-
-const IconSearch: React.FC<IconSearchProps> = () => {
-  const [query, setQuery] = useRecoilState(searchQueryAtom);
-  const [style, setStyle] = useRecoilState(styleQueryAtom);
-
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value);
-  };
-
-  const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setStyle(event.target.value as IconStyle);
-  };
-
-  return (
-    <>
-      <input value={query} onChange={handleSearchChange} />
-      <select value={style?.toString()} onChange={handleStyleChange}>
-        <option value={""}>All</option>
-        <option value={IconStyle.THIN}>Thin</option>
-        <option value={IconStyle.LIGHT}>Light</option>
-        <option value={IconStyle.REGULAR}>Regular</option>
-        <option value={IconStyle.BOLD}>Bold</option>
-        <option value={IconStyle.FILL}>Fill</option>
-        <option value={IconStyle.DUOTONE}>Duotone</option>
-      </select>
-    </>
-  );
-};
-
-export default IconSearch;
diff --git a/src/components/index.ts b/src/components/index.ts
index 3898f18..f310248 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,3 @@
 export { default as App } from "./App/App";
 export { default as IconGrid } from "./IconGrid/IconGrid";
-export { default as IconSearch } from "./IconSearch/IconSearch";
\ No newline at end of file
+export { default as Toolbar } from "./Toolbar/Toolbar";
\ No newline at end of file