feat : create share function item with rareity bg

components/admin/editors/weapon-editor.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "@/components/ui/resilient-image";
 import { GripVerticalIcon, PlusIcon, Trash2Icon } from "lucide-react";
 import { useState, type ReactNode } from "react";
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
@@ -10,6 +9,7 @@ import { saveWeaponSection } from "@/app/admin/actions";
 import { SaveStatus } from "@/components/admin/save-status";
 import { DeleteConfirmationDialog } from "@/components/admin/ui/delete-confirmation-dialog";
 import { WeaponSelect } from "@/components/admin/ui/catalog-select";
+import { CatalogItemImage } from "@/components/catalog-item-image";
 import { Button } from "@/components/ui/button";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
@@ -20,7 +20,6 @@ import { useManualSave } from "@/hooks/use-manual-save";
 import { adminDraftKey } from "@/lib/editor/local-draft";
 import { weaponSectionSchema } from "@/lib/guides/schemas";
 import { supportsWeaponType } from "@/lib/catalog/lunaris";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
 import { finalizePercentInput, normalizePercentInput } from "@/lib/guides/percent-input";
 import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
 import { cn } from "@/lib/utils";
@@ -255,20 +254,7 @@ export function WeaponEditor({ guide, weapons, characters, initial }: EditorBase
                         <CardHeader>
                           <CardTitle className="flex items-center gap-3">
                             {selectedWeapon ? (
-                              <div
-                                className={cn(
-                                  "relative size-10 shrink-0 overflow-hidden rounded-lg",
-                                  rarityGradientClass(selectedWeapon.rarity),
-                                )}
-                              >
-                                <Image
-                                  src={selectedWeapon.imageUrl}
-                                  alt=""
-                                  fill
-                                  sizes="40px"
-                                  className="object-contain"
-                                />
-                              </div>
+                              <CatalogItemImage item={selectedWeapon} kind="weapon" alt="" className="size-10 shrink-0 rounded-lg" sizes="40px" />
                             ) : null}
                             <span>อันดับ {rowIndex + 1}</span>
                           </CardTitle>