feat: implement preferences pane

app/assets/javascripts/components/IconButton.tsx

@@ -0,0 +1,53 @@
+import { FunctionComponent } from 'preact';
+import { Icon, IconType } from './Icon';
+
+const ICON_BUTTON_TYPES: {
+  [type: string]: { className: string };
+} = {
+  normal: {
+    className: '',
+  },
+  primary: {
+    className: 'info',
+  },
+};
+
+export type IconButtonType = keyof typeof ICON_BUTTON_TYPES;
+
+interface IconButtonProps {
+  /**
+   * onClick - preventDefault is handled within the component
+   */
+  onClick: () => void;
+
+  type: IconButtonType;
+
+  className?: string;
+
+  iconType: IconType;
+}
+
+/**
+ * CircleButton component with an icon for SPA
+ * preventDefault is already handled within the component
+ */
+export const IconButton: FunctionComponent<IconButtonProps> = ({
+  onClick,
+  type,
+  className,
+  iconType,
+}) => {
+  const click = (e: MouseEvent) => {
+    e.preventDefault();
+    onClick();
+  };
+  const typeProps = ICON_BUTTON_TYPES[type];
+  return (
+    <button
+      className={`sn-icon-button ${typeProps.className} ${className ?? ''}`}
+      onClick={click}
+    >
+      <Icon type={iconType} />
+    </button>
+  );
+};