39 lines
820 B
TypeScript
39 lines
820 B
TypeScript
"use client";
|
|
|
|
import { useFormStatus } from "react-dom";
|
|
|
|
import { LoaderIcon } from "@/components/icons";
|
|
|
|
import { Button } from "./ui/button";
|
|
|
|
export function SubmitButton({
|
|
children,
|
|
isSuccessful,
|
|
}: {
|
|
children: React.ReactNode;
|
|
isSuccessful: boolean;
|
|
}) {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<Button
|
|
aria-disabled={pending || isSuccessful}
|
|
className="relative"
|
|
disabled={pending || isSuccessful}
|
|
type={pending ? "button" : "submit"}
|
|
>
|
|
{children}
|
|
|
|
{(pending || isSuccessful) && (
|
|
<span className="absolute right-4 animate-spin">
|
|
<LoaderIcon />
|
|
</span>
|
|
)}
|
|
|
|
<output aria-live="polite" className="sr-only">
|
|
{pending || isSuccessful ? "正在提交" : "提交表单"}
|
|
</output>
|
|
</Button>
|
|
);
|
|
}
|