Extract dashboard task action buttons

apps/dashboard/src/TaskActionButtons.tsx

@@ -0,0 +1,52 @@
+import type { DashboardTask, DashboardTaskAction } from './api';
+import { taskActionsFor } from './dashboardHelpers';
+import type { Messages } from './i18n';
+
+export type TaskActionKey =
+  | 'create'
+  | `${string}:edit`
+  | `${string}:${DashboardTaskAction}`;
+
+interface TaskActionButtonsProps {
+  className?: string;
+  onTaskAction: (task: DashboardTask, action: DashboardTaskAction) => void;
+  task: DashboardTask;
+  taskActionKey: string | null;
+  t: Messages;
+}
+
+export function TaskActionButtons({
+  className,
+  onTaskAction,
+  task,
+  taskActionKey,
+  t,
+}: TaskActionButtonsProps) {
+  const taskActions = taskActionsFor(task);
+  if (taskActions.length === 0) return null;
+
+  const rootClassName = className
+    ? `task-actions ${className}`
+    : 'task-actions';
+
+  return (
+    <div className={rootClassName}>
+      {taskActions.map((action) => {
+        const actionKey: TaskActionKey = `${task.id}:${action}`;
+        const busy = taskActionKey === actionKey;
+        return (
+          <button
+            aria-busy={busy || undefined}
+            className={`task-action task-action-${action}${busy ? ' is-busy' : ''}`}
+            disabled={busy}
+            key={action}
+            onClick={() => onTaskAction(task, action)}
+            type="button"
+          >
+            {busy ? t.tasks.actions.busy : t.tasks.actions[action]}
+          </button>
+        );
+      })}
+    </div>
+  );
+}