From 516b34752f49111909e93343aef44bdc41ac8c67 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 6 Jul 2023 01:53:30 -0700
Subject: [PATCH] Add ToolbarButton component

This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file
---
 .../common/ToolbarButton/index.module.scss    | 36 +++++++++++++++++++
 components/common/ToolbarButton/index.tsx     | 35 ++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 components/common/ToolbarButton/index.module.scss
 create mode 100644 components/common/ToolbarButton/index.tsx

diff --git a/components/common/ToolbarButton/index.module.scss b/components/common/ToolbarButton/index.module.scss
new file mode 100644
index 00000000..bbfdbef7
--- /dev/null
+++ b/components/common/ToolbarButton/index.module.scss
@@ -0,0 +1,36 @@
+.button {
+  background: var(--toolbar-item-bg);
+  border-radius: $bubble-menu-item-corner;
+  color: var(--toolbar-item-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: $medium;
+  font-size: $font-small;
+  padding: $unit-half;
+
+  &:hover {
+    background: var(--toolbar-item-bg-hover);
+    color: var(--toolbar-item-text-hover);
+    cursor: pointer;
+
+    svg {
+      fill: var(--text-primary);
+    }
+  }
+
+  &.active {
+    background: var(--toolbar-item-bg-active);
+    color: var(--toolbar-item-text-active);
+
+    svg {
+      fill: white;
+    }
+  }
+
+  svg {
+    fill: var(--text-tertiary);
+    height: $unit-2x;
+    width: $unit-2x;
+  }
+}
diff --git a/components/common/ToolbarButton/index.tsx b/components/common/ToolbarButton/index.tsx
new file mode 100644
index 00000000..363d4187
--- /dev/null
+++ b/components/common/ToolbarButton/index.tsx
@@ -0,0 +1,35 @@
+import { useTranslation } from 'next-i18next'
+import classNames from 'classnames'
+
+import { Editor } from '@tiptap/react'
+import Tooltip from '~components/common/Tooltip'
+
+import styles from './index.module.scss'
+
+interface Props {
+  editor: Editor
+  action: string
+  level?: number
+  icon: React.ReactNode
+  onClick: () => void
+}
+
+const ToolbarIcon = ({ editor, action, level, icon, onClick }: Props) => {
+  const { t } = useTranslation('common')
+  const classes = classNames({
+    [styles.button]: true,
+    [styles.active]: level
+      ? editor.isActive(action, { level: level })
+      : editor.isActive(action),
+  })
+
+  return (
+    <Tooltip content={t(`toolbar.tooltips.${action}`)}>
+      <button onClick={onClick} className={classes}>
+        {icon}
+      </button>
+    </Tooltip>
+  )
+}
+
+export default ToolbarIcon