Started working on Sign in buttons
This commit is contained in:
15
src/components/default/auth/buttons/client/SignIn.tsx
Normal file
15
src/components/default/auth/buttons/client/SignIn.tsx
Normal 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>
|
||||
);
|
||||
};
|
@ -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';
|
0
src/components/default/auth/index.tsx
Normal file
0
src/components/default/auth/index.tsx
Normal file
28
src/components/default/forms/StatusMessage.tsx
Normal file
28
src/components/default/forms/StatusMessage.tsx
Normal 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>
|
||||
);
|
||||
};
|
40
src/components/default/forms/SubmitButton.tsx
Normal file
40
src/components/default/forms/SubmitButton.tsx
Normal 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>
|
||||
);
|
||||
};
|
2
src/components/default/forms/index.tsx
Normal file
2
src/components/default/forms/index.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
export { StatusMessage } from './StatusMessage';
|
||||
export { SubmitButton } from './SubmitButton';
|
Reference in New Issue
Block a user