Convert Menu components to TypeScript

2026-04-22 22:16:13 -04:00 · 2024-12-22 15:41:53 -08:00
parent 2935d148a8
commit 12a1ef0387
42 changed files with 749 additions and 1018 deletions
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import React from 'react';
+import Icon, { IconName } from 'Components/Icon';
+import MenuButton, { MenuButtonProps } from 'Components/Menu/MenuButton';
+import { icons } from 'Helpers/Props';
+import styles from './ToolbarMenuButton.css';
+
+export interface ToolbarMenuButtonProps
+  extends Omit<MenuButtonProps, 'children'> {
+  className?: string;
+  iconName: IconName;
+  showIndicator?: boolean;
+  text?: string;
+}
+
+function ToolbarMenuButton({
+  iconName,
+  showIndicator = false,
+  text,
+  ...otherProps
+}: ToolbarMenuButtonProps) {
+  return (
+    <MenuButton className={styles.menuButton} {...otherProps}>
+      <div>
+        <Icon name={iconName} size={21} />
+
+        {showIndicator ? (
+          <span
+            className={classNames(styles.indicatorContainer, 'fa-layers fa-fw')}
+          >
+            <Icon name={icons.CIRCLE} size={9} />
+          </span>
+        ) : null}
+
+        <div className={styles.labelContainer}>
+          <div className={styles.label}>{text}</div>
+        </div>
+      </div>
+    </MenuButton>
+  );
+}
+
+export default ToolbarMenuButton;