40 lines
737 B
TypeScript
40 lines
737 B
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/ui';
|
|
import { type ComponentProps } from 'react';
|
|
import { useFormStatus } from 'react-dom';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
type Props = ComponentProps<typeof Button> & {
|
|
disabled?: boolean;
|
|
pendingText?: string;
|
|
};
|
|
|
|
export const SubmitButton = ({
|
|
children,
|
|
disabled = false,
|
|
pendingText = 'Submitting...',
|
|
...props
|
|
}: Props) => {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<Button
|
|
className='cursor-pointer'
|
|
type='submit'
|
|
aria-disabled={pending}
|
|
disabled={disabled}
|
|
{...props}
|
|
>
|
|
{pending || disabled ? (
|
|
<>
|
|
<Loader2 className='mr-2 h-4 w-4 animate-spin' />
|
|
{pendingText}
|
|
</>
|
|
) : (
|
|
children
|
|
)}
|
|
</Button>
|
|
);
|
|
};
|