fix : correct color

components/admin/ui/catalog-select.tsx

@@ -13,7 +13,7 @@ import {
   ComboboxTrigger,
   FuzzyCombobox,
 } from "@/components/ui/combobox";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
 import { cn } from "@/lib/utils";
 
 export interface AdminCatalogItem {
@@ -50,6 +50,7 @@ type CommonSelectProps<Item extends AdminCatalogItem> = {
   emptyLabel?: string;
   invalid?: boolean;
   rarityBackground?: boolean;
+  characterBackground?: boolean;
   searchNames?: (item: Item) => string[];
 };
 
@@ -69,6 +70,7 @@ export function CatalogDropdown<Item extends AdminCatalogItem>({
   emptyLabel = "ไม่พบรายการ",
   invalid = false,
   rarityBackground = false,
+  characterBackground = false,
   showSelectedImage = false,
   showClear = true,
   label,
@@ -82,7 +84,7 @@ export function CatalogDropdown<Item extends AdminCatalogItem>({
         <div
           className={cn(
             "relative size-10 shrink-0 overflow-hidden rounded-md",
-            rarityBackground && rarityGradientClass(selected.rarity),
+            rarityBackground && (characterBackground ? characterRarityGradientClass(selected.key, selected.rarity) : rarityGradientClass(selected.rarity)),
           )}
         >
           <Image src={selected.imageUrl} alt="" fill sizes="40px" className="object-contain" />
@@ -110,7 +112,7 @@ export function CatalogDropdown<Item extends AdminCatalogItem>({
             <ComboboxList>
               {(item) => (
                 <ComboboxItem key={item.key} value={item}>
-                  <CatalogOptionImage item={item} rarityBackground={rarityBackground} />
+                  <CatalogOptionImage item={item} rarityBackground={rarityBackground} characterBackground={characterBackground} />
                   <span className="whitespace-nowrap">{item.name}</span>
                 </ComboboxItem>
               )}
@@ -138,6 +140,7 @@ function CatalogSlotSelect<Item extends AdminCatalogItem>({
   emptyLabel = "ไม่พบรายการ",
   invalid = false,
   rarityBackground = true,
+  characterBackground = false,
   searchNames = (item) => [item.name, ...(item.aliases ?? [])],
   className,
 }: CatalogSlotSelectProps<Item>) {
@@ -158,7 +161,7 @@ function CatalogSlotSelect<Item extends AdminCatalogItem>({
         aria-invalid={invalid}
         className={cn(
           "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-md border bg-muted p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&>svg]:hidden",
-          rarityBackground && selected && rarityGradientClass(selected.rarity),
+          rarityBackground && selected && (characterBackground ? characterRarityGradientClass(selected.key, selected.rarity) : rarityGradientClass(selected.rarity)),
           className,
         )}
       >
@@ -174,7 +177,7 @@ function CatalogSlotSelect<Item extends AdminCatalogItem>({
         <ComboboxList>
           {(item) => (
             <ComboboxItem key={item.key} value={item}>
-              <CatalogOptionImage item={item} rarityBackground={rarityBackground} />
+              <CatalogOptionImage item={item} rarityBackground={rarityBackground} characterBackground={characterBackground} />
               <span className="whitespace-nowrap">{item.name}</span>
             </ComboboxItem>
           )}
@@ -216,7 +219,7 @@ function DomainCatalogSelect<Item extends AdminCatalogItem>({
 }
 
 export function CharacterSelect<Item extends AdminCatalogItem>(props: DomainSelectProps<Item>) {
-  return <DomainCatalogSelect {...props} />;
+  return <DomainCatalogSelect {...props} characterBackground />;
 }
 
 export function WeaponSelect<Item extends AdminCatalogItem>(props: DomainSelectProps<Item>) {
@@ -318,15 +321,17 @@ export function ArtifactSelect<Item extends AdminCatalogItem>(
 function CatalogOptionImage({
   item,
   rarityBackground,
+  characterBackground = false,
 }: {
   item: AdminCatalogItem;
   rarityBackground: boolean;
+  characterBackground?: boolean;
 }) {
   return (
     <div
       className={cn(
         "relative size-8 shrink-0 overflow-hidden rounded-md",
-        rarityBackground && rarityGradientClass(item.rarity),
+        rarityBackground && (characterBackground ? characterRarityGradientClass(item.key, item.rarity) : rarityGradientClass(item.rarity)),
       )}
     >
       <Image src={item.imageUrl} alt="" fill sizes="32px" className="object-contain" />