Button or link migrate

.eslintrc

@@ -37,6 +37,8 @@
     }],
     "class-methods-use-this": 0,
     "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true}],
+    "react/prop-types": "off",
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
     "no-return-assign": [2, "except-parens"],
     "jsx-a11y/anchor-is-valid": [
       "error",

client/common/ButtonOrLink.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor, history } from '../test-utils';
-import ButtonOrLink from './ButtonOrLink';
+import ButtonOrLink from './ButtonOrLink.tsx';
 
 describe('ButtonOrLink', () => {
   const clickHandler = jest.fn();
@@ -33,4 +33,14 @@ describe('ButtonOrLink', () => {
 
     await waitFor(() => expect(history.location.pathname).toEqual('/about'));
   });
+
+  it('can render any child components', () => {
+    const MockChild = () => <div data-testid="mock-child">Mock Child</div>;
+    render(
+      <ButtonOrLink>
+        <MockChild />
+      </ButtonOrLink>
+    );
+    expect(screen.getByTestId('mock-child')).toBeInTheDocument();
+  });
 });

client/common/ButtonOrLink.tsx

@@ -0,0 +1,53 @@
+import React, {
+  ReactNode,
+  ButtonHTMLAttributes,
+  AnchorHTMLAttributes
+} from 'react';
+import { Link } from 'react-router-dom';
+
+/**
+ * Props for ButtonOrLink component.
+ *
+ * @property {string} [href] - If provided, renders as a link instead of a button.
+ *   - External links (starting with 'http') render as `<a>` and open in a new tab.
+ *   - Internal links render using react-router's `<Link>`.
+ * @property {ReactNode} children - The content inside the button or link.
+ *   Can be plain text or a React element.
+ */
+type ButtonOrLinkProps = {
+  href?: string | undefined,
+  children: ReactNode
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'href'> &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+
+/**
+ * Helper for switching between a `<button>`, `<a>`, or `<Link>` based on the `href` value.
+ *
+ * - Renders a `<button>` by default.
+ * - If `href` is provided:
+ *   - If it starts with 'http', renders an external `<a>` link.
+ *   - Otherwise, renders an internal `<Link>` from react-router.
+ */
+const ButtonOrLink: React.FC<ButtonOrLinkProps> = ({
+  href = undefined,
+  children,
+  ...props
+}) => {
+  if (href) {
+    if (href.startsWith('http')) {
+      return (
+        <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+          {children}
+        </a>
+      );
+    }
+    return (
+      <Link to={href} {...props}>
+        {children}
+      </Link>
+    );
+  }
+  return <button {...props}>{children}</button>;
+};
+
+export default ButtonOrLink;

client/components/Dropdown/MenuItem.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import ButtonOrLink from '../../common/ButtonOrLink';
+import ButtonOrLink from '../../common/ButtonOrLink.tsx';
 
 // TODO: combine with NavMenuItem
 

client/components/Menubar/MenubarItem.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext, useMemo } from 'react';
-import ButtonOrLink from '../../common/ButtonOrLink';
+import ButtonOrLink from '../../common/ButtonOrLink.tsx';
 import { MenubarContext, ParentMenuContext } from './contexts';
 
 function MenubarItem({