43 lines
1.2 KiB
TypeScript
43 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-kodo-cyan text-white hover:bg-kodo-cyan focus:ring-blue-500 dark:bg-kodo-cyan dark:hover:bg-kodo-cyan'
|
|
: 'bg-kodo-slate text-kodo-text-main hover:bg-kodo-slate focus:ring-gray-500 dark:bg-kodo-steel dark:text-kodo-text-main dark:hover:bg-kodo-steel',
|
|
(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>
|
|
);
|
|
}
|