refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/datatables/TableSettingsMenu.tsx

@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+import { Menu, MenuButton, MenuList } from '@reach/menu-button';
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { useTableContext } from './TableContainer';
+
+interface Props {
+  quickActions?: ReactNode;
+}
+
+export function TableSettingsMenu({
+  quickActions,
+  children,
+}: PropsWithChildren<Props>) {
+  useTableContext();
+
+  return (
+    <Menu className="setting">
+      {({ isExpanded }) => (
+        <>
+          <MenuButton
+            className={clsx('table-setting-menu-btn', {
+              'setting-active': isExpanded,
+            })}
+          >
+            <i className="fa fa-cog" aria-hidden="true" /> Settings
+          </MenuButton>
+          <MenuList>
+            <div className="tableMenu">
+              <div className="menuHeader">Table settings</div>
+              <div className="menuContent">{children}</div>
+              {quickActions && (
+                <div>
+                  <div className="menuHeader">Quick actions</div>
+                  <div className="menuContent">{quickActions}</div>
+                </div>
+              )}
+            </div>
+          </MenuList>
+        </>
+      )}
+    </Menu>
+  );
+}