40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { useAuthActions } from '@convex-dev/auth/react';
|
|
import { Button, type buttonVariants } from '@/components/ui';
|
|
import { type ComponentProps } from 'react';
|
|
import { type VariantProps } from 'class-variance-authority';
|
|
|
|
type Props = {
|
|
buttonProps?: Omit<ComponentProps<'button'>, 'onClick'> &
|
|
VariantProps<typeof buttonVariants> & {
|
|
asChild?: boolean;
|
|
};
|
|
type?: 'signIn' | 'signUp';
|
|
};
|
|
|
|
export const MicrosoftSignInButton = ({
|
|
buttonProps,
|
|
type = 'signIn',
|
|
}: Props) => {
|
|
const { signIn } = useAuthActions();
|
|
return (
|
|
<Button
|
|
size='lg'
|
|
onClick={() => signIn('microsoft-entra-id')}
|
|
className='text-lg font-semibold'
|
|
{...buttonProps}
|
|
>
|
|
<div className='flex flex-row my-auto space-x-2'>
|
|
<div className='flex flex-row my-auto'>
|
|
<svg className='scale-150' viewBox='0 0 23 23'>
|
|
<path fill='#f35325' d='M1 1h10v10H1z' />
|
|
<path fill='#81bc06' d='M12 1h10v10H12z' />
|
|
<path fill='#05a6f0' d='M1 12h10v10H1z' />
|
|
<path fill='#ffba08' d='M12 12h10v10H12z' />
|
|
</svg>
|
|
</div>
|
|
<p>{type === 'signIn' ? 'Sign In' : 'Sign Up'} with Microsoft</p>
|
|
</div>
|
|
</Button>
|
|
);
|
|
};
|