tsf-submit-button

1'use client';
2 
3import type { VariantProps } from 'class-variance-authority';
4import { Loader2Icon } from 'lucide-react';
5import { Button, type buttonVariants } from '@/components/ui/button';
6import { useFormContext } from '@/components/ui/shuip/tanstack-form/form-context';
7 
8type ButtonProps = React.ComponentProps<'button'> &
9  VariantProps<typeof buttonVariants> & {
10    asChild?: boolean;
11  };
12 
13export interface SubmitButtonProps {
14  children?: React.ReactNode;
15  props?: ButtonProps;
16}
17 
18export function SubmitButton({ children = 'Submit', props }: SubmitButtonProps) {
19  const form = useFormContext();
20  return (
21    <form.Subscribe selector={(state) => [state.isSubmitting, state.canSubmit]}>
22      {([isSubmitting, canSubmit]) => (
23        <Button type='submit' disabled={isSubmitting || !canSubmit} className='transition-all duration-300' {...props}>
24          {isSubmitting && <Loader2Icon role='status' aria-label='Loading' className='size-4 animate-spin' />}
25          {children}
26        </Button>
27      )}
28    </form.Subscribe>
29  );
30}