Move app to apps/web-react in pnpm workspace layout

apps/web-react/app/components/SubmitButton.tsx

@@ -0,0 +1,58 @@
+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>
+	);
+}