59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import Image from "@/components/ui/resilient-image";
|
|
import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type CatalogItemKind = "character" | "weapon" | "artifact";
|
|
|
|
export type CatalogItemImageData = {
|
|
key: string;
|
|
imageUrl: string | null;
|
|
rarity?: number | null;
|
|
};
|
|
|
|
export function CatalogItemImage({
|
|
item,
|
|
kind,
|
|
alt,
|
|
rarityBackground = true,
|
|
className,
|
|
imageClassName,
|
|
sizes,
|
|
loading,
|
|
title,
|
|
}: {
|
|
item: CatalogItemImageData;
|
|
kind: CatalogItemKind;
|
|
alt: string;
|
|
rarityBackground?: boolean;
|
|
className?: string;
|
|
imageClassName?: string;
|
|
sizes?: string;
|
|
loading?: "eager" | "lazy";
|
|
title?: string;
|
|
}) {
|
|
const backgroundClass = rarityBackground
|
|
? kind === "character"
|
|
? characterRarityGradientClass(item.key, item.rarity)
|
|
: rarityGradientClass(item.rarity)
|
|
: undefined;
|
|
|
|
return (
|
|
<div title={title} className={cn("relative overflow-hidden", backgroundClass, className)}>
|
|
{item.imageUrl ? (
|
|
<Image
|
|
src={item.imageUrl}
|
|
alt={alt}
|
|
fill
|
|
sizes={sizes}
|
|
loading={loading}
|
|
className={cn(
|
|
kind === "artifact" ? "object-contain" : "object-cover scale-105",
|
|
imageClassName,
|
|
kind === "weapon" && "p-0",
|
|
)}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|