Started working on Sign in buttons

src/components/default/auth/buttons/client/SignIn.tsx

@@ -0,0 +1,15 @@
+'use client';
+import Link from 'next/link';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type SignInProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
+
+export const SignInButton = (props: SignInProps) => {
+  return (
+    <Button asChild {...props}>
+      <Link href='/sign-in'>Sign In</Link>
+    </Button>
+  );
+};

src/components/default/auth/buttons/client/SignInWithApple.tsx

@@ -0,0 +1,6 @@
+'use client';
+import { signInWithApple, getProfile, updateProfile } from '@/lib/queries';
+import { StatusMessage, SubmitButton } from '@/components/default/forms';
+import { useAuth } from '@/lib/hooks/context';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';

src/components/default/forms/StatusMessage.tsx

@@ -0,0 +1,28 @@
+type Message =
+| { success: string}
+| { error: string}
+| { message: string}
+
+export const StatusMessage = (message: Message) => {
+  return (
+    <div className='flex flex-col gap-2 w-full
+        text-sm bg-accent rounded-md p-2 px-4'
+    >
+      {'success' in message && (
+        <div className='dark:text-green-500 text-green-700'>
+          {message.success}
+        </div>
+      )}
+      {'error' in message && (
+        <div className='text-destructive'>
+          {message.error}
+        </div>
+      )}
+      {'message' in message && (
+        <div>
+          {message.message}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/default/forms/SubmitButton.tsx

@@ -0,0 +1,40 @@
+'use client';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { useFormStatus } from 'react-dom';
+import { Loader2 } from 'lucide-react';
+
+type SubmitButtonProps = ComponentProps<'button'> &
+VariantProps<typeof buttonVariants> & {
+  pendingText?: string;
+  loaderClassName?: ComponentProps<'div'>['className'];
+  textClassName?: ComponentProps<'p'>['className'];
+};
+
+export const SubmitButton = ({
+  children,
+  pendingText = 'Submitting...',
+  loaderClassName = 'mr-2 h-4 w-4 animate-spin',
+  textClassName = 'text-sm font-medium',
+  ...props
+}: SubmitButtonProps) => {
+  const { pending } = useFormStatus();
+  return (
+    <Button
+      className='cursor-pointer'
+      type='submit'
+      aria-disabled={pending}
+      {...props}
+    >
+      {pending || props.disabled ? (
+        <>
+          <Loader2 className={loaderClassName} />
+          <p className={textClassName}>{pendingText}</p>
+        </>
+      ) : (
+          children
+      )}
+    </Button>
+  );
+};

src/components/default/forms/index.tsx

@@ -0,0 +1,2 @@
+export { StatusMessage } from './StatusMessage';
+export { SubmitButton } from './SubmitButton';