45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface AuthButtonProps
|
||
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||
|
|
loading?: boolean;
|
||
|
|
variant?: 'primary' | 'secondary';
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AuthButton({
|
||
|
|
loading,
|
||
|
|
variant = 'primary',
|
||
|
|
className,
|
||
|
|
children,
|
||
|
|
disabled,
|
||
|
|
...props
|
||
|
|
}: AuthButtonProps) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
className={cn(
|
||
|
|
'w-full px-4 py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
|
||
|
|
variant === 'primary'
|
||
|
|
? 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600'
|
||
|
|
: 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600',
|
||
|
|
(disabled || loading) && 'opacity-50 cursor-not-allowed',
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
disabled={disabled || loading}
|
||
|
|
aria-busy={loading}
|
||
|
|
aria-disabled={disabled || loading ? 'true' : 'false'}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{loading ? (
|
||
|
|
<>
|
||
|
|
<span className="sr-only">Chargement en cours</span>
|
||
|
|
<span aria-hidden="true">Chargement...</span>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
children
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|