51 lines
1.0 KiB
TypeScript
51 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import type { CSSProperties } from "react";
|
|
|
|
export interface CharacterAvatarProps {
|
|
src: string;
|
|
alt: string;
|
|
className?: string;
|
|
size?: number | string;
|
|
imageSize?: number;
|
|
priority?: boolean;
|
|
}
|
|
|
|
export function CharacterAvatar({
|
|
src,
|
|
alt,
|
|
className,
|
|
size = 43,
|
|
imageSize,
|
|
priority = false,
|
|
}: CharacterAvatarProps) {
|
|
const resolvedImageSize =
|
|
imageSize ?? (typeof size === "number" ? size : 96);
|
|
const style: CSSProperties = {
|
|
width: size,
|
|
height: size,
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={[
|
|
"inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--color-avatar-border,#fbf3f5)",
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
style={style}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={resolvedImageSize}
|
|
height={resolvedImageSize}
|
|
priority={priority}
|
|
className="size-full object-cover"
|
|
/>
|
|
</span>
|
|
);
|
|
}
|