Add ToolbarButton component

This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file

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;
+  }
+}

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