From da38cddb828981a83d1146bd4d6444a7af31355c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?=
 <1682504+fspoettel@users.noreply.github.com>
Date: Tue, 22 Mar 2022 21:21:38 +0100
Subject: [PATCH] chore: extract `ToolbarButton` component

---
 src/components/Toolbar.js                      | 16 ++++++----------
 src/components/controls/atoms/ToolbarButton.js | 12 ++++++++++++
 2 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 src/components/controls/atoms/ToolbarButton.js

diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index 63da701..87d9bc9 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -21,6 +21,7 @@ import {
   getCategoryIdxs,
   getFilterIdx,
 } from "../common/utilities.js";
+import { ToolbarButton } from "./controls/atoms/ToolbarButton";
 
 class Toolbar extends React.Component {
   constructor(props) {
@@ -179,20 +180,15 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarTab(_selected, label, iconKey) {
-    const isActive = this.state._selected === _selected;
-    const classes = isActive ? "toolbar-tab active" : "toolbar-tab";
-
     return (
-      <div
-        className={classes}
-        key={iconKey}
+      <ToolbarButton
+        label={label}
+        iconKey={iconKey}
+        isActive={this.state._selected === _selected}
         onClick={() => {
           this.selectTab(_selected);
         }}
-      >
-        <i className="material-icons">{iconKey}</i>
-        <div className="tab-caption">{label}</div>
-      </div>
+      />
     );
   }
 
diff --git a/src/components/controls/atoms/ToolbarButton.js b/src/components/controls/atoms/ToolbarButton.js
new file mode 100644
index 0000000..a8520d9
--- /dev/null
+++ b/src/components/controls/atoms/ToolbarButton.js
@@ -0,0 +1,12 @@
+export function ToolbarButton({ isActive, iconKey, onClick, label }) {
+  return (
+    <div
+      className={isActive ? "toolbar-tab active" : "toolbar-tab"}
+      key={iconKey}
+      onClick={onClick}
+    >
+      <i className="material-icons">{iconKey}</i>
+      <div className="tab-caption">{label}</div>
+    </div>
+  );
+}