feat : update

components/commission/request-form.tsx

@@ -2,7 +2,8 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { XIcon } from "lucide-react";
+import Image from "next/image";
+import { UserRoundIcon, XIcon } from "lucide-react";
 import { toast } from "sonner";
 import { ArtifactSelect, CharacterSelect, WeaponSelect } from "@/components/admin/ui/catalog-select";
 import { ConstellationSelect, RefinementSelect } from "@/components/admin/ui/option-select";
@@ -95,18 +96,21 @@ export function CommissionRequestForm({ catalog }: { catalog: Catalog }) {
                 <div className="grid grid-cols-[2fr_1fr] gap-1">
                   <CharacterSelect presentation="slot" items={catalog.characters} value={member.characterKey}
                     label={`เลือกตัวละครตำแหน่ง ${memberIndex + 1}`} placeholder="ค้นหาชื่อตัวละคร…"
+                    placeholderIcon={<UserRoundIcon className="size-10" aria-hidden="true" />}
                     className="border-0 [&>img]:object-cover [&>img]:p-0" onValueChange={(characterKey) => {
                       const teams = structuredClone(request.teams); teams[teamIndex].members[memberIndex] = { ...blankMember(), characterKey }; patch({ teams });
                     }} />
                   <div className="grid min-w-0 grid-rows-2 gap-1">
                     <WeaponSelect presentation="slot" items={compatibleWeapons(member.characterKey)} value={member.weaponKey}
                       label={`เลือกอาวุธของตัวละครตำแหน่ง ${memberIndex + 1}`} placeholder="ค้นหาอาวุธที่รองรับ…"
+                      placeholderIcon={<Image src="/icon/nav/Weapon.png" alt="" width={32} height={32} className="size-8 object-contain opacity-60" />}
                       emptyLabel={character ? "ไม่พบอาวุธ" : "เลือกตัวละครก่อน"} onValueChange={(weaponKey) => {
                         const teams = structuredClone(request.teams); teams[teamIndex].members[memberIndex].weaponKey = weaponKey;
                         teams[teamIndex].members[memberIndex].refinement = "1"; patch({ teams });
                       }} />
                     <ArtifactSelect presentation="slot" items={catalog.artifacts} value={member.artifactKey}
                       label={`เลือกอาร์ติแฟกต์ของตัวละครตำแหน่ง ${memberIndex + 1}`} placeholder="ค้นหาชุดอาร์ติแฟกต์…"
+                      placeholderIcon={<Image src="/icon/nav/Artifact.webp" alt="" width={32} height={32} className="size-8 object-contain opacity-60" />}
                       onValueChange={(artifactKey) => {
                         const teams = structuredClone(request.teams); teams[teamIndex].members[memberIndex].artifactKey = artifactKey; patch({ teams });
                       }} />
@@ -177,6 +181,7 @@ export function CommissionRequestForm({ catalog }: { catalog: Catalog }) {
           <div className="relative w-20 sm:w-24">
             <CharacterSelect presentation="slot" items={catalog.characters} value={set.characterKey}
               label={`เลือกตัวละครเปรียบเทียบอาวุธชุดที่ ${index + 1}`} placeholder="ค้นหาชื่อตัวละคร…"
+              placeholderIcon={<UserRoundIcon className="size-9" aria-hidden="true" />}
               className="border-0 [&>img]:object-cover [&>img]:p-0" onValueChange={(characterKey) => {
                 const weapons = structuredClone(request.weapons); weapons[index] = { characterKey, weaponKeys: [""], refinements: {} }; patch({ weapons });
               }} />
@@ -209,6 +214,7 @@ export function CommissionRequestForm({ catalog }: { catalog: Catalog }) {
           <div className="w-20 sm:w-24">
             <CharacterSelect presentation="slot" items={catalog.characters} value={set.characterKey}
               label={`เลือกตัวละครเปรียบเทียบกลุ่มดาวชุดที่ ${index + 1}`} placeholder="ค้นหาชื่อตัวละคร…"
+              placeholderIcon={<UserRoundIcon className="size-9" aria-hidden="true" />}
               className="border-0 [&>img]:object-cover [&>img]:p-0" onValueChange={(characterKey) => {
                 const constellations = structuredClone(request.constellations); constellations[index] = { characterKey, levels: [] }; patch({ constellations });
               }} />