openhands
ce93b92a81
AvatarImage is used on server pages via UserAvatarThumbnail but lacked 'use client', so the onError handler on its <img> could not cross the RSC boundary. /login rendered the error page, hanging the news e2e journey until the 240s test timeout. - Mark AvatarImage as a client component like ProfileImage - Replace inline <img onError> on mod/users server pages with the client AvatarImage component
48 lines
1.0 KiB
TypeScript
48 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
type AvatarOptions,
|
|
avatarImageOnError,
|
|
getAvatarUrl,
|
|
} from "@/lib/imager";
|
|
|
|
interface AvatarImageProps {
|
|
figure: string;
|
|
options?: AvatarOptions;
|
|
width: number;
|
|
height: number;
|
|
alt: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function AvatarImage({
|
|
figure,
|
|
options,
|
|
width,
|
|
height,
|
|
alt,
|
|
className = "",
|
|
}: AvatarImageProps) {
|
|
// Auto-pick the smallest size that still looks crisp at the requested
|
|
// dimensions, unless the caller passed an explicit size.
|
|
const max = Math.max(width, height);
|
|
const autoSize: "s" | "m" | "l" =
|
|
options?.size ??
|
|
(options?.headOnly ? "l" : max <= 40 ? "s" : max <= 80 ? "m" : "l");
|
|
|
|
return (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={getAvatarUrl(figure, { ...options, size: autoSize })}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
loading="lazy"
|
|
decoding="async"
|
|
onError={avatarImageOnError}
|
|
style={{ maxWidth: width, maxHeight: height }}
|
|
className={`image-pixelated object-contain ${className}`}
|
|
/>
|
|
);
|
|
}
|