Toolbar: refactor from IconSearch and add 'size' and 'color' controls

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>
   );

src/components/IconSearch/IconSearch.tsx

@@ -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;

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";
+export { default as Toolbar } from "./Toolbar/Toolbar";