52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { HTMLProps } from 'react';
|
|
import { experimental_useFormStatus as useFormStatus } from 'react-dom';
|
|
import Spinner from './Spinner';
|
|
import { cc } from '@/utility/css';
|
|
|
|
interface Props extends HTMLProps<HTMLButtonElement> {
|
|
icon?: JSX.Element
|
|
}
|
|
|
|
export default function SubmitButtonWithStatus(props: Props) {
|
|
const {
|
|
icon,
|
|
children,
|
|
disabled,
|
|
className,
|
|
type: _type,
|
|
...buttonProps
|
|
} = props;
|
|
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<button
|
|
type="submit"
|
|
disabled={disabled}
|
|
className={cc(
|
|
className,
|
|
'inline-flex items-center gap-2',
|
|
)}
|
|
{...buttonProps}
|
|
>
|
|
{(icon || pending) &&
|
|
<span className={cc(
|
|
'min-w-[1rem]',
|
|
'inline-flex justify-center sm:justify-normal',
|
|
'-mx-0.5',
|
|
)}>
|
|
{pending
|
|
? <Spinner size={14} />
|
|
: icon}
|
|
</span>}
|
|
<span className={cc(
|
|
icon !== undefined && 'hidden sm:inline-block',
|
|
)}>
|
|
{children}
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|