sendou.ink/app/components/SubmitButton.tsx

import { type FetcherWithComponents, useNavigation } from "react-router";
import type { z } from "zod";
import type { ActionsOf } from "~/utils/action-schemas";
import { SendouButton, type SendouButtonProps } from "./elements/Button";

type SubmitButtonProps<TSchema extends z.ZodTypeAny> = SendouButtonProps & {
	/** If the page has multiple forms you can pass in fetcher.state to differentiate when this SubmitButton should be in submitting state */
	state?: FetcherWithComponents<any>["state"];
	testId?: string;
} & (
		| {
				/** Action schema of the route the form submits to. Only used for typing `_action`. */
				schema: TSchema;
				/** `_action` to submit, narrowed to the literals of the schema. */
				_action: ActionsOf<TSchema>;
		  }
		| { schema?: never; _action?: never }
	);

export function SubmitButton<TSchema extends z.ZodTypeAny>({
	children,
	state,
	schema: _schema,
	_action,
	testId,
	...rest
}: SubmitButtonProps<TSchema>) {
	const navigation = useNavigation();

	const isSubmitting = state ? state !== "idle" : navigation.state !== "idle";

	const name = () => {
		if (rest.name) return rest.name;
		if (_action) return "_action";

		return undefined;
	};

	const value = () => {
		if (rest.value) return rest.value;
		if (_action) return _action;

		return undefined;
	};

	return (
		<SendouButton
			{...rest}
			isDisabled={rest.isDisabled || isSubmitting}
			type="submit"
			name={name()}
			value={value()}
			data-testid={testId ?? "submit-button"}
		>
			{children}
		</SendouButton>
	);
}