88 lines
1.7 KiB
TypeScript
88 lines
1.7 KiB
TypeScript
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"
|
|
/>
|
|
);
|
|
};
|