Update theme & stuff

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

@@ -0,0 +1,78 @@
+'use server';
+import { signInWithApple } from '@/lib/queries';
+import { SubmitButton } from '@/components/default/forms';
+import Image from 'next/image';
+import { type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { SupabaseServer } from '@/utils/supabase';
+
+type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
+type ImageProps = {
+  src: string;
+  alt: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+type FormProps = ComponentProps<'form'>;
+type TextProps = ComponentProps<'p'>;
+type SignInWithAppleProps = {
+  buttonProps?: ButtonProps;
+  imageProps?: ImageProps;
+  formProps?: FormProps;
+  textProps?: TextProps;
+};
+
+export const SignInWithApple = async ({
+  buttonProps = {
+    className: 'w-full cursor-pointer',
+    type: 'submit',
+  },
+  imageProps = {
+    src: '/icons/auth/apple.svg',
+    alt: 'Apple',
+    className: 'invert-75 dark:invert-25',
+    width: 24,
+    height: 24,
+  },
+  formProps = {
+    className: 'my-4',
+  },
+  textProps = {
+    className: 'text-[1.0rem]',
+  },
+} : SignInWithAppleProps) => {
+  const supabase = await SupabaseServer();
+
+  const handleSignInWithApple = async () => {
+    try {
+      if (!supabase) throw new Error('Supabase client not found');
+      const result = await signInWithApple(supabase);
+      if (result.error) throw new Error(`Error Signing in with Apple: ${result.error.message}`);
+      if (result.data.url) window.location.href = result.data.url;
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <form action={handleSignInWithApple} {...formProps}>
+      <SubmitButton
+        pendingText='Signing in...'
+        {...buttonProps}
+      >
+        <div className='flex items-center gap-2'>
+          <Image
+            src={imageProps.src}
+            alt={imageProps.alt}
+            className={imageProps.className}
+            width={imageProps.width}
+            height={imageProps.height}
+          />
+          <p className={textProps.className} {...textProps}>Sign In with Apple</p>
+        </div>
+      </SubmitButton>
+    </form>
+  );
+};