59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
|
|
export interface UserMessageAvatarProps {
|
|
avatarUrl?: string | null;
|
|
className?: string;
|
|
size?: number | string;
|
|
}
|
|
|
|
export function UserMessageAvatar({
|
|
avatarUrl,
|
|
className,
|
|
size = 43,
|
|
}: UserMessageAvatarProps) {
|
|
const avatarClassName = [
|
|
"flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--color-avatar-border,#fbf3f5) bg-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))",
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
const avatarStyle = { width: size, height: size };
|
|
const imageSize = typeof size === "number" ? size : 64;
|
|
|
|
if (avatarUrl && avatarUrl.length > 0) {
|
|
return (
|
|
<div
|
|
className={avatarClassName}
|
|
style={avatarStyle}
|
|
aria-label="User avatar"
|
|
>
|
|
<Image
|
|
src={avatarUrl}
|
|
alt=""
|
|
width={imageSize}
|
|
height={imageSize}
|
|
className="size-full object-cover"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={avatarClassName}
|
|
style={avatarStyle}
|
|
aria-label="Guest avatar"
|
|
>
|
|
<Image
|
|
src="/images/avatar/placeholder.png"
|
|
alt="Guest"
|
|
width={imageSize}
|
|
height={imageSize}
|
|
className="size-full object-cover"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|