feat : create share function item with rareity bg

components/admin/glossary-manager.tsx

@@ -2,7 +2,6 @@
 
 import { searchItems } from "@/lib/search";
 
-import Image from "@/components/ui/resilient-image";
 import { SearchIcon, Trash2Icon } from "lucide-react";
 import { useMemo, useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
@@ -18,8 +17,8 @@ import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Spinner } from "@/components/ui/spinner";
+import { CatalogItemImage } from "@/components/catalog-item-image";
 import type { GlossaryKind } from "@/lib/glossary";
-import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
 import { cn } from "@/lib/utils";
 
 type CatalogItem = { key: string; name: string; imageUrl: string; rarity?: number | null };
@@ -113,7 +112,7 @@ export function GlossaryManager({
                 onValueChange={(key) => setItem(catalogs[kind].find((value) => value.key === key) ?? null)}
                 placeholder="ค้นหารายการ…"
                 rarityBackground
-                characterBackground={kind === "character"}
+                itemKind={kind}
               />
             </Field>
             <Field>
@@ -153,12 +152,7 @@ export function GlossaryManager({
             return (
               <div key={entry.id} className="flex items-center gap-3 rounded-lg border p-3">
                 {catalogItem ? (
-                  <span className={cn(
-                    "relative size-10 shrink-0 overflow-hidden rounded-md bg-muted",
-                    entry.kind === "character" ? characterRarityGradientClass(catalogItem.key, catalogItem.rarity) : rarityGradientClass(catalogItem.rarity),
-                  )}>
-                    <Image src={catalogItem.imageUrl} alt="" fill sizes="40px" className="object-contain" />
-                  </span>
+                  <CatalogItemImage item={catalogItem} kind={entry.kind as GlossaryKind} alt="" className="size-10 shrink-0 rounded-md bg-muted" sizes="40px" />
                 ) : null}
                 <div className="min-w-0 flex-1">
                   <p className="font-medium">{entry.alias}</p>