Cleaned up components and their props

src/components/default/auth/buttons/client/sign-in-with-apple.tsx

@@ -15,21 +15,15 @@ import { cn } from '@/lib/utils';
 
 export type SignInWithAppleProps = {
   submitButtonProps?: SubmitButtonProps;
-  formClassName?: ComponentProps<'form'>['className'];
-  formProps?: Omit<ComponentProps<'form'>, 'className'>;
-  textClassName?: ComponentProps<'p'>['className'];
-  textProps?: Omit<ComponentProps<'p'>, 'className'>;
-  iconClassName?: ComponentProps<'svg'>['className'];
-  iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
+  formProps?: ComponentProps<'form'>;
+  textProps?: ComponentProps<'p'>;
+  iconProps?: ComponentProps<'svg'>;
 };
 
 export const SignInWithApple = ({
   submitButtonProps,
-  formClassName,
   formProps,
-  textClassName,
   textProps,
-  iconClassName,
   iconProps,
 } : SignInWithAppleProps) => {
   const router = useRouter();
@@ -58,19 +52,19 @@ export const SignInWithApple = ({
 
   return (
     <form
-      onSubmit={handleSignInWithApple}
-      className={cn('my-4', formClassName)}
       {...formProps}
+      onSubmit={handleSignInWithApple}
+      className={cn('my-4', formProps?.className)}
     >
       <SubmitButton
         disabled={isLoading || loading}
         pendingText='Signing in...'
-        className={cn('w-full', submitButtonProps?.className)}
         {...submitButtonProps}
+        className={cn('w-full', submitButtonProps?.className)}
       >
         <div className='flex items-center gap-2'>
-          <FaApple className={cn('size-5', iconClassName)} {...iconProps} />
-          <p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
+          <FaApple {...iconProps} className={cn('size-5', iconProps?.className)} />
+          <p {...textProps} className={cn('text-[1.0rem]', textProps?.className)} >
             Sign In with Apple
           </p>
         </div>