diff --git a/src/molecules/Avatar/Avatar.tsx b/src/molecules/Avatar/Avatar.tsx index e923c850..190b709c 100644 --- a/src/molecules/Avatar/Avatar.tsx +++ b/src/molecules/Avatar/Avatar.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { useState, useEffect } from 'react' import { AvatarProps } from './Avatar.types' -/** Los mismos 10 colores que usaba la v8, determinados por el último dígito del userId */ +/** Los mismos 10 colores que usaba la v8, determinados por un índice estable */ const AVATAR_COLORS = [ '#0076ba', '#229f9c', @@ -16,13 +16,14 @@ const AVATAR_COLORS = [ '#ff6363', ] -const getColorByUserId = (userId: number): string => { - if (userId >= 0) { - const digits = userId.toString().split('') - const position = parseInt(digits[digits.length - 1], 10) - return AVATAR_COLORS[position] - } - return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)] +const getColorIndex = (fullName?: string): number => { + const trimmedNameLength = fullName?.trim().length ?? 0 + return trimmedNameLength % 10 +} + +const getAvatarColor = (fullName?: string): string => { + const position = getColorIndex(fullName) + return AVATAR_COLORS[position] } const getInitials = (fullName: string): string => @@ -35,11 +36,10 @@ const getInitials = (fullName: string): string => /** * Muestra la foto de perfil del usuario o un placeholder circular con sus iniciales. - * El color de fondo es determinista según el `userId`. + * El color de fondo es determinista según el largo del `fullName`. */ export const Avatar = ({ fullName, - userId, picture, size = 50, fontSize = 14, @@ -51,8 +51,8 @@ export const Avatar = ({ const [imageValid, setImageValid] = useState(false) useEffect(() => { - setBgColor(getColorByUserId(userId)) - }, [userId]) + setBgColor(getAvatarColor(fullName)) + }, [fullName]) const wrapperStyle: React.CSSProperties = { alignItems: 'center', diff --git a/src/molecules/Avatar/Avatar.types.ts b/src/molecules/Avatar/Avatar.types.ts index f884f284..d6b3238e 100644 --- a/src/molecules/Avatar/Avatar.types.ts +++ b/src/molecules/Avatar/Avatar.types.ts @@ -1,8 +1,8 @@ export interface AvatarProps { /** Nombre completo del usuario (se usan las primeras 2 iniciales como fallback) */ fullName: string - /** ID del usuario (determina el color de fondo de forma determinista) */ - userId: number + /** ID del usuario (determina el color de fondo de forma determinista; si no existe, se usa el largo del nombre) */ + userId?: number /** URL de la foto de perfil (opcional) */ picture?: string /** Diámetro en píxeles */