feat : create share function item with rareity bg

2026-10-11 20:17:16 +07:00
parent c84c691fe9
commit 99c129eb26
12 changed files with 185 additions and 158 deletions
@@ -0,0 +1,54 @@
+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("object-contain", imageClassName)}
+        />
+      ) : null}
+    </div>
+  );
+}