feat : create share function item with rareity bg

components/commission/request-summary.tsx

@@ -1,21 +1,17 @@
-import Image from "@/components/ui/resilient-image";
 import { ArrowUpRightIcon } from "lucide-react";
 import type { ReactNode } from "react";
 import { Badge } from "@/components/ui/badge";
+import { CatalogItemImage, type CatalogItemKind } from "@/components/catalog-item-image";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Kbd } from "@/components/ui/kbd";
 import { elementBackgroundColor } from "@/lib/catalog/element";
-import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
 import { hasCustomStats, type CommissionRequest } from "@/lib/commission/request";
-import { cn } from "@/lib/utils";
 
 type Item = { key: string; name: string; imageUrl: string; rarity?: number | null; element?: string | null };
 type Catalog = { characters: Item[]; weapons: Item[]; artifacts: Item[] };
 
-function ItemImage({ item, size = "small", character = false }: { item: Item; size?: "small" | "large"; character?: boolean }) {
-  return <div title={item.name} className={cn("relative aspect-square min-w-0 overflow-hidden rounded-lg", character ? characterRarityGradientClass(item.key, item.rarity) : rarityGradientClass(item.rarity))}>
-    <Image src={item.imageUrl} alt={item.name} fill sizes={size === "large" ? "160px" : "64px"} className="object-contain" />
-  </div>;
+function ItemImage({ item, size = "small", kind = "weapon" }: { item: Item; size?: "small" | "large"; kind?: CatalogItemKind }) {
+  return <CatalogItemImage item={item} kind={kind} alt={item.name} title={item.name} className="aspect-square min-w-0 rounded-lg" sizes={size === "large" ? "160px" : "64px"} />;
 }
 
 function LunarisItemLink({ item, kind, children }: {
@@ -25,7 +21,7 @@ function LunarisItemLink({ item, kind, children }: {
     target="_blank" rel="noreferrer"
     aria-label={`เปิดข้อมูล${kind === "weapon" ? "อาวุธ" : "อาร์ติแฟกต์"} ${item.name} บน Lunaris`}
     className="block min-w-0 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring">
-    <div className="relative"><ItemImage item={item} />
+    <div className="relative"><ItemImage item={item} kind={kind} />
       <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent! p-0 text-white">
         <ArrowUpRightIcon aria-hidden="true" />
       </Kbd>
@@ -49,7 +45,7 @@ function CommissionTeamCard({ team, index, catalog }: { team: CommissionRequest[
           const artifact = artifacts.get(member.artifactKey);
           return <div key={memberIndex} className="min-w-0 rounded-lg p-1 lg:p-1.5" style={{ backgroundColor: elementBackgroundColor(character?.element) }}>
             <div className="grid grid-cols-1 gap-1 lg:grid-cols-[2fr_1fr]">
-              {character ? <ItemImage item={character} size="large" character /> : <div className="aspect-square rounded-lg bg-muted" />}
+              {character ? <ItemImage item={character} size="large" kind="character" /> : <div className="aspect-square rounded-lg bg-muted" />}
               <div className="grid min-w-0 grid-cols-2 gap-0.5 lg:grid-cols-1 lg:grid-rows-2 lg:gap-1">
                 {weapon ? <LunarisItemLink item={weapon} kind="weapon" /> : <div title={member.weaponKey} className="aspect-square rounded-lg bg-muted" />}
                 {artifact ? <LunarisItemLink item={artifact} kind="artifact" /> : <div title={member.artifactKey} className="aspect-square rounded-lg bg-muted" />}
@@ -109,7 +105,7 @@ export function CommissionRequestSummary({ request, catalog, amountBaht }: {
                 : <p key={key} className="w-16 wrap-break-word text-xs">{key}</p>;
             })}
           </div>
-          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" character /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
+          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" kind="character" /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
           {set.customStats !== undefined && <div className="col-span-2 flex flex-col gap-1">
             <Badge variant="secondary">Custom stats ของ {character?.name ?? set.characterKey}</Badge>
             <p className="whitespace-pre-wrap wrap-break-word text-sm">{set.customStats}</p>
@@ -125,7 +121,7 @@ export function CommissionRequestSummary({ request, catalog, amountBaht }: {
         </CardHeader>
         <CardContent className="grid grid-cols-[minmax(0,1fr)_64px] items-center gap-3">
           <div className="flex min-w-0 flex-wrap gap-2">{set.levels.map((level) => <Badge key={level} variant="outline">C{level}</Badge>)}</div>
-          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" character /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
+          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" kind="character" /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
           {set.customStats !== undefined && <div className="col-span-2 flex flex-col gap-1">
             <Badge variant="secondary">Custom stats ของ {character?.name ?? set.characterKey}</Badge>
             <p className="whitespace-pre-wrap wrap-break-word text-sm">{set.customStats}</p>