Jesse
33 lines
804 B
TypeScript
33 lines
804 B
TypeScript
"use client";
|
|
|
|
import Avatar from "boring-avatars";
|
|
import { beamAvatarPalettes, type BeamAvatar } from "@/lib/beam-avatar";
|
|
|
|
export type UserAvatarProps = {
|
|
avatar: BeamAvatar;
|
|
size: number;
|
|
className?: string;
|
|
label?: string;
|
|
};
|
|
|
|
export function UserAvatar({ avatar, size, className, label }: UserAvatarProps) {
|
|
const palette = beamAvatarPalettes[avatar.palette] ?? beamAvatarPalettes[0];
|
|
|
|
return (
|
|
<span
|
|
className={className ? `user-avatar ${className}` : "user-avatar"}
|
|
style={{ width: size, height: size }}
|
|
role={label ? "img" : undefined}
|
|
aria-label={label}
|
|
aria-hidden={label ? undefined : true}
|
|
>
|
|
<Avatar
|
|
name={avatar.seed}
|
|
variant="beam"
|
|
colors={[...palette.colors]}
|
|
size={size}
|
|
/>
|
|
</span>
|
|
);
|
|
}
|