Started working on Sign in buttons

This commit is contained in:
2025-06-24 16:59:43 -05:00
parent fbb24185df
commit 29ba0d881d
6 changed files with 91 additions and 0 deletions

View File

@ -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>
);
};

View File

@ -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';

View File

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

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