From ddecdf0451451274e3564715ce8d239adfb083e3 Mon Sep 17 00:00:00 2001
From: Tobias Fried <friedtm@gmail.com>
Date: Fri, 17 Jul 2020 13:18:43 -0400
Subject: [PATCH] State: add 'iconSize' and 'iconColor' atoms

---
 src/components/Toolbar/Toolbar.css |  0
 src/components/Toolbar/Toolbar.tsx | 54 ++++++++++++++++++++++++++++++
 src/state/atoms.ts                 | 10 ++++++
 3 files changed, 64 insertions(+)
 create mode 100644 src/components/Toolbar/Toolbar.css
 create mode 100644 src/components/Toolbar/Toolbar.tsx

diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
new file mode 100644
index 0000000..92e6e49
--- /dev/null
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { searchQueryAtom, styleQueryAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
+import { IconStyle } from "../../lib/Icon";
+
+type ToolbarProps = {}
+
+const Toolbar: React.FC<ToolbarProps> = () => {
+  const [query, setQuery] = useRecoilState(searchQueryAtom);
+  const [style, setStyle] = useRecoilState(styleQueryAtom);
+  const [size, setSize] = useRecoilState(iconSizeAtom);
+  const [color, setColor] = useRecoilState(iconColorAtom);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+
+  const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setStyle(event.target.value as IconStyle);
+  };
+
+  const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { target: { value }} = event;
+    const sizeInput = parseInt(value);
+
+    if (sizeInput > 0) setSize(sizeInput);
+  }
+
+  void(color)
+  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { target: { value: color }} = event;
+    if (color[0] === "#") setColor(color);
+  }
+
+  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>
+      <input value={size} type="range" min={12} max={256} onChange={handleSizeChange}/>
+      <input type="color" onChange={handleColorChange}/>
+    </>
+  );
+}
+
+export default Toolbar;
\ No newline at end of file
diff --git a/src/state/atoms.ts b/src/state/atoms.ts
index 6d6c810..ef0c18a 100644
--- a/src/state/atoms.ts
+++ b/src/state/atoms.ts
@@ -17,3 +17,13 @@ export const styleQueryAtom = atom<IconStyle>({
   key: "styleQueryAtom",
   default: IconStyle.REGULAR,
 });
+
+export const iconSizeAtom = atom<number>({
+  key: "iconSizeAtom",
+  default: 24,
+});
+
+export const iconColorAtom = atom<string>({
+  key: "iconColorAtom",
+  default: "#000000",
+});