feat : update

components/public/structured-guide.tsx

@@ -603,16 +603,16 @@ function WeaponSectionContent({
 }
 
 function ArtifactSection({ guide }: { guide: PublicGuide }) {
-  const targetConditionCount = guide.artifactProfile?.targetConditions.filter(
+  const targetConditions = guide.artifactProfile?.targetConditions.filter(
     (group) => group.rows.length,
-  ).length ?? 0;
+  ) ?? [];
   return (
     <ArtifactSectionContent
       guide={guide}
       action={
         <ArtifactImageExport
           fileName={`${guide.name}-Artifact.png`}
-          targetConditionCount={targetConditionCount}
+          targetConditionLabels={targetConditions.map((group, index) => group.name || `Condition ${index + 1}`)}
         >
           <ArtifactSectionContent guide={guide} exporting />
         </ArtifactImageExport>
@@ -821,7 +821,7 @@ function ArtifactSectionContent({
                   </div>
                     ))
                   ) : (
-                    <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย">
+                    <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย" labels={profile.targetConditions.filter((group) => group.rows.length).map((group, index) => group.name || `Condition ${index + 1}`)}>
                       {profile.targetConditions.filter((group) => group.rows.length).map((group, groupIndex) => (
                         <div key={groupIndex}>
                           <p className="mb-2 text-sm font-medium">ค่าสถานะต่ำๆที่ควรจะปั้นไว้</p>
@@ -1116,12 +1116,12 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
           </p>
         ) : null}
       </header>
-      <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว">
+      <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว" labels={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, index) => group.name || `Condition ${index + 1}`)}>
       {guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
         <div key={group.id} className="flex flex-col gap-4">
           <div>
             <GuideImageExport
-              fileName={`${guide.name}-Constellations${groups.length > 1 ? `-Condition-${groupIndex + 1}` : ""}.png`}
+              fileName={`${guide.name}-Constellations${groups.length > 1 ? `-${group.name || `Condition-${groupIndex + 1}`}` : ""}.png`}
               width={1500}
               height={1500}
               captureClassName="p-0"
@@ -1133,7 +1133,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
               />
             </GuideImageExport>
           </div>
-          {groups.length > 1 ? <h2 className="font-heading text-2xl font-semibold">Condition {groupIndex + 1}</h2> : null}
+          {groups.length > 1 ? <h2 className="font-heading text-2xl font-semibold">{group.name || `Condition ${groupIndex + 1}`}</h2> : null}
           {group.note ? <p className="whitespace-pre-wrap">{group.note}</p> : null}
           <div className="grid gap-4 md:grid-cols-2">
             {group.rows.map((row) => (