feat(artifact) : add tier-list conditions

components/public/artifact-image-export.tsx

@@ -32,18 +32,21 @@ export function ArtifactImageExport({
   hasNote,
   targetConditionLabels,
   recommendedConditionLabels,
+  tierConditionLabels,
 }: {
   children: ReactNode;
   fileName: string;
   hasNote: boolean;
   targetConditionLabels: readonly string[];
   recommendedConditionLabels: readonly string[];
+  tierConditionLabels: readonly string[];
 }) {
   const [sections, setSections] = useState<Set<ArtifactExportSection>>(
     () => new Set(sectionOptions.map(([value]) => value)),
   );
   const [recommendedCondition, setRecommendedCondition] = useState("0");
   const [targetCondition, setTargetCondition] = useState("0");
+  const [tierCondition, setTierCondition] = useState("0");
   const entireSection = sections.size === sectionOptions.length;
   const hiddenSections = sectionOptions
     .filter(([value]) => !sections.has(value))
@@ -51,6 +54,7 @@ export function ArtifactImageExport({
     .join("");
   const targetRule = `[data-target-condition]:not([data-target-condition="${targetCondition}"]){display:none!important}`;
   const recommendedRule = `[data-recommended-condition]:not([data-recommended-condition="${recommendedCondition}"]){display:none!important}`;
+  const tierRule = `[data-tier-condition]:not([data-tier-condition="${tierCondition}"]){display:none!important}`;
   const onlySection = sections.size === 1 ? [...sections][0] : null;
   const exportWidth = onlySection === "best-stats"
     ? 700
@@ -133,6 +137,14 @@ export function ArtifactImageExport({
             </ToggleGroup>
           </div>
         ) : null}
+        {sections.has("tierlist") && tierConditionLabels.length > 1 ? (
+          <div className="flex flex-col gap-2">
+            <p className="text-sm font-medium">เงื่อนไขอันดับอาร์ติแฟกต์</p>
+            <ToggleGroup variant="outline" value={[tierCondition]} onValueChange={(values) => { if (values[0]) setTierCondition(values[0]); }}>
+              {tierConditionLabels.map((label, index) => <ToggleGroupItem key={index} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">{label}</ToggleGroupItem>)}
+            </ToggleGroup>
+          </div>
+        ) : null}
         {sections.has("target-stats") && targetConditionLabels.length > 1 ? (
           <div className="flex flex-col gap-2">
             <p className="text-sm font-medium">เงื่อนไขค่าสถานะเป้าหมาย</p>
@@ -162,7 +174,7 @@ export function ArtifactImageExport({
           disabled={sections.size === 0}
           captureClassName="p-0"
         >
-          <style>{hiddenSections + targetRule + recommendedRule + hideEmptyRightColumn + layoutRules}</style>
+          <style>{hiddenSections + targetRule + recommendedRule + tierRule + hideEmptyRightColumn + layoutRules}</style>
           {children}
         </GuideImageExport>
       </DialogContent>

components/public/structured-guide.tsx

@@ -61,7 +61,7 @@ function hasSection(guide: PublicGuide, slug: string): boolean {
   if (slug === "weapon") return guide.weapons.length > 0;
   if (slug === "artifact")
     return (
-      guide.artifactGroups.some((group) => group.rows.length > 0) ||
+      guide.artifactGroups.some((condition) => condition.tiers.some((group) => group.rows.length > 0)) ||
       Boolean(
         guide.artifactProfile &&
         (guide.artifactProfile.recommendedConditions.some((condition) => condition.sands.length || condition.goblet.length || condition.circlet.length || condition.substats.length) ||
@@ -626,6 +626,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
           hasNote={Boolean(guide.artifactProfile?.note)}
           recommendedConditionLabels={(guide.artifactProfile?.recommendedConditions ?? []).map((group, index) => group.name || `เงื่อนไข ${index + 1}`)}
           targetConditionLabels={targetConditions.map((group, index) => group.name || `เงื่อนไข ${index + 1}`)}
+          tierConditionLabels={guide.artifactGroups.map((group, index) => group.name || `เงื่อนไข ${index + 1}`)}
         >
           <ArtifactSectionContent guide={guide} exporting />
         </ArtifactImageExport>
@@ -752,9 +753,13 @@ function ArtifactSectionContent({
               {recommendedCards}
             </ConditionSwitcher>
           )}
-          <div data-artifact-export-section="tierlist" className="artifact-export-tierlist order-first flex flex-col gap-5">
-            {guide.artifactGroups.map((group) => (
-              <Card key={group.id}>
+          <div data-artifact-export-section="tierlist" className="order-first">
+            {(() => {
+              const tierCards = guide.artifactGroups.map((condition, conditionIndex) => (
+              <div key={condition.id} data-tier-condition={conditionIndex} className="artifact-export-tierlist flex flex-col gap-5">
+              {exporting && guide.artifactGroups.length > 1 ? <p className="text-sm font-medium">{condition.name || <ExportText th={`เงื่อนไข ${conditionIndex + 1}`} en={`Condition ${conditionIndex + 1}`} />}</p> : null}
+              {condition.note ? <p data-export-note className="whitespace-pre-wrap text-sm text-muted-foreground">{condition.note}</p> : null}
+              {condition.tiers.map((group) => <Card key={group.id}>
                 <CardHeader>
                   <CardTitle>
                     {group.name === "Late Game"
@@ -799,8 +804,11 @@ function ArtifactSectionContent({
                     </div>
                   ))}
                 </CardContent>
-              </Card>
-        ))}
+              </Card>)}
+              </div>
+              ));
+              return exporting ? tierCards : <ConditionSwitcher label="เลือกเงื่อนไขอันดับอาร์ติแฟกต์" labels={guide.artifactGroups.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)}>{tierCards}</ConditionSwitcher>;
+            })()}
         </div>
       </div>
         {profile ? (