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>