feat: two factor authentication segment in preferences with mocked state (#600)

app/assets/javascripts/components/RoundIconButton.tsx

@@ -0,0 +1,42 @@
+import { FunctionComponent } from 'preact';
+import { Icon, IconType } from './Icon';
+
+type ButtonType = 'normal' | 'primary';
+
+interface Props {
+  /**
+   * onClick - preventDefault is handled within the component
+   */
+  onClick: () => void;
+
+  type: ButtonType;
+
+  className?: string;
+
+  icon: IconType;
+}
+
+/**
+ * IconButton component with an icon
+ * preventDefault is already handled within the component
+ */
+export const RoundIconButton: FunctionComponent<Props> = ({
+  onClick,
+  type,
+  className,
+  icon: iconType,
+}) => {
+  const click = (e: MouseEvent) => {
+    e.preventDefault();
+    onClick();
+  };
+  const classes = type === 'primary' ? 'info ' : '';
+  return (
+    <button
+      className={`sn-icon-button ${classes} ${className ?? ''}`}
+      onClick={click}
+    >
+      <Icon type={iconType} />
+    </button>
+  );
+};