87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { useAuth } from '@avanzacast/shared-hooks';
|
|
|
|
interface AuthButtonProps {
|
|
className?: string;
|
|
loginUrl?: string;
|
|
dashboardUrl?: string;
|
|
variant?: 'primary' | 'secondary' | 'ghost';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
/**
|
|
* Componente compartido para botón de autenticación
|
|
* Muestra "Iniciar sesión" o información del usuario según el estado de auth
|
|
*/
|
|
export function AuthButton({
|
|
className = '',
|
|
loginUrl = '/auth/login',
|
|
dashboardUrl = '/broadcasts',
|
|
variant = 'primary',
|
|
size = 'md'
|
|
}: AuthButtonProps) {
|
|
const { user, isAuthenticated, logout } = useAuth();
|
|
|
|
const baseClasses = 'inline-flex items-center justify-center font-medium transition-colors rounded-lg';
|
|
|
|
const variantClasses = {
|
|
primary: 'bg-blue-600 text-white hover:bg-blue-700',
|
|
secondary: 'bg-white text-blue-600 border-2 border-blue-600 hover:bg-blue-50',
|
|
ghost: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100',
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-3 py-1.5 text-sm',
|
|
md: 'px-4 py-2 text-base',
|
|
lg: 'px-6 py-3 text-lg',
|
|
};
|
|
|
|
const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
|
|
|
|
if (isAuthenticated && user) {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
{/* Avatar y nombre del usuario */}
|
|
<a
|
|
href={dashboardUrl}
|
|
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
|
|
>
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
|
|
{user.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-700 hidden md:inline">
|
|
{user.name}
|
|
</span>
|
|
</a>
|
|
|
|
{/* Botón de logout */}
|
|
<button
|
|
onClick={logout}
|
|
className="text-sm text-gray-600 hover:text-gray-900 transition-colors"
|
|
aria-label="Cerrar sesión"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<a href={loginUrl} className={classes}>
|
|
Iniciar sesión
|
|
</a>
|
|
);
|
|
}
|