feat : update

components/public/artifact-image-export.tsx

@@ -29,11 +29,11 @@ type ArtifactExportSection = (typeof sectionOptions)[number][0];
 export function ArtifactImageExport({
   children,
   fileName,
-  targetConditionCount,
+  targetConditionLabels,
 }: {
   children: ReactNode;
   fileName: string;
-  targetConditionCount: number;
+  targetConditionLabels: readonly string[];
 }) {
   const [sections, setSections] = useState<Set<ArtifactExportSection>>(
     () => new Set(sectionOptions.map(([value]) => value)),
@@ -99,7 +99,7 @@ export function ArtifactImageExport({
             </Field>
           ))}
         </FieldGroup>
-        {sections.has("target-stats") && targetConditionCount > 1 ? (
+        {sections.has("target-stats") && targetConditionLabels.length > 1 ? (
           <div className="flex flex-col gap-2">
             <p className="text-sm font-medium">Target Stats condition</p>
             <ToggleGroup
@@ -109,13 +109,13 @@ export function ArtifactImageExport({
                 if (values[0]) setTargetCondition(values[0]);
               }}
             >
-              {Array.from({ length: targetConditionCount }, (_, index) => (
+              {targetConditionLabels.map((label, index) => (
                 <ToggleGroupItem
                   key={index}
                   value={String(index)}
                   className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
                 >
-                  Condition {index + 1}
+                  {label}
                 </ToggleGroupItem>
               ))}
             </ToggleGroup>

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) => (

components/public/team-search.tsx

@@ -392,7 +392,7 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
         <ToggleGroup aria-label="เลือกเงื่อนไขทีม" variant="outline" value={[activeCondition]} onValueChange={(values) => {
           if (values[0]) setActiveCondition(values[0]);
         }}>
-          {groups.map((group, index) => <ToggleGroupItem key={group.id} value={String(index)}>Condition {index + 1}</ToggleGroupItem>)}
+          {groups.map((group, index) => <ToggleGroupItem key={group.id} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">{group.name || `Condition ${index + 1}`}</ToggleGroupItem>)}
         </ToggleGroup>
       ) : null}
       {activeGroup?.note ? <p className="whitespace-pre-wrap text-muted-foreground">{activeGroup.note}</p> : null}