46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import Image from "next/image";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type DiscordAvatarProps = {
|
|
avatarUrl: string | null;
|
|
decorationUrl?: string | null;
|
|
alt: string;
|
|
fallback: string;
|
|
className?: string;
|
|
imageError?: boolean;
|
|
onImageError?: () => void;
|
|
};
|
|
|
|
export function DiscordAvatar({
|
|
avatarUrl,
|
|
decorationUrl,
|
|
alt,
|
|
fallback,
|
|
className,
|
|
imageError = false,
|
|
onImageError,
|
|
}: DiscordAvatarProps) {
|
|
return (
|
|
<div className={cn("relative shrink-0", className)}>
|
|
<Avatar className="size-full">
|
|
{!imageError && avatarUrl && (
|
|
<AvatarImage src={avatarUrl} alt={alt} onError={onImageError} />
|
|
)}
|
|
<AvatarFallback>{fallback}</AvatarFallback>
|
|
</Avatar>
|
|
{decorationUrl && (
|
|
<Image
|
|
src={decorationUrl}
|
|
alt=""
|
|
aria-hidden
|
|
width={160}
|
|
height={160}
|
|
className="pointer-events-none absolute left-1/2 top-1/2 size-[125%] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain"
|
|
unoptimized
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|