infoalloggi-monorepo/apps/infoalloggi/src/components/user_avatar.tsx

import { cn, getHexColorFromString, getInitials } from "~/lib/utils";
import type { UsersId } from "~/schemas/public/Users";
import { Facehash } from "./facehash/facehash";

const colorOptions = new Map<string, string>();

export const getUserColor = (str: string) => {
	if (colorOptions.has(str)) {
		// biome-ignore lint/style/noNonNullAssertion: <exists>
		return colorOptions.get(str)!;
	}
	const usercolor = getHexColorFromString(str);
	colorOptions.set(str, usercolor);
	return usercolor;
};
/*
export const UserAvatarOld = ({
	userId,
	username,
	className,
}: {
	userId: UsersId;
	username?: string;
	className?: string;
}) => {
	const userColor = getUserColor(userId);

	return (
		<Avatar className={cn("size-20", className)}>
			<AvatarFallback
				style={{
					backgroundColor: userColor,
					color: colorIsDarkSimple(userColor) ? "#FFFFFF" : "#000000",
				}}
			>
				{username && getInitials(username)}
			</AvatarFallback>
		</Avatar>
	);
};
*/
export const UserAvatar = ({
	userId,
	username,
	className,
}: {
	userId: UsersId;
	username?: string;
	className?: string;
}) => {
	const value = `${username && getInitials(username)}${userId}`;
	return (
		<Facehash
			className={cn("size-20 rounded-full", className)}
			colors={[
				"#2D3436",
				"#535C68",
				"#636E72",
				"#FAB1A0",
				"#FF7675",
				"#FF4757",
				"#EE5253",
				"#D63031",
				"#FF9F43",
				"#FDCB6E",
				"#F1C40F",
				"#55E6C1",
				"#00B894",
				"#26DE81",
				"#2ECC71",
				"#00CEC9",
				"#81ECEC",
				"#74B9FF",
				"#0984E3",
				"#4834D4",
				"#6C5CE7",
				"#A29BFE",
				"#A55EEA",
				"#6D214F",
			]}
			initialsCount={2}
			intensity3d="none"
			name={value}
			showInitial={username !== undefined}
			variant="solid"
		/>
	);
};