Refactor <ActionsModal> to TypeScript (#34559)

app/javascript/mastodon/features/ui/components/actions_modal.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import type { MenuItem } from 'mastodon/models/dropdown_menu';
+import {
+  isActionItem,
+  isExternalLinkItem,
+} from 'mastodon/models/dropdown_menu';
+
+export const ActionsModal: React.FC<{
+  actions: MenuItem[];
+  onClick: React.MouseEventHandler;
+}> = ({ actions, onClick }) => (
+  <div className='modal-root__modal actions-modal'>
+    <ul>
+      {actions.map((option, i: number) => {
+        if (option === null) {
+          return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
+        }
+
+        const { text, dangerous } = option;
+
+        let element: React.ReactElement;
+
+        if (isActionItem(option)) {
+          element = (
+            <button onClick={onClick} data-index={i}>
+              {text}
+            </button>
+          );
+        } else if (isExternalLinkItem(option)) {
+          element = (
+            <a
+              href={option.href}
+              target={option.target ?? '_target'}
+              data-method={option.method}
+              rel='noopener'
+              onClick={onClick}
+              data-index={i}
+            >
+              {text}
+            </a>
+          );
+        } else {
+          element = (
+            <Link to={option.to} onClick={onClick} data-index={i}>
+              {text}
+            </Link>
+          );
+        }
+
+        return (
+          <li
+            className={classNames({
+              'dropdown-menu__item--dangerous': dangerous,
+            })}
+            key={`${text}-${i}`}
+          >
+            {element}
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+);