feat : add codition for stats build

components/public/artifact-image-export.tsx

@@ -31,16 +31,19 @@ export function ArtifactImageExport({
   fileName,
   hasNote,
   targetConditionLabels,
+  recommendedConditionLabels,
 }: {
   children: ReactNode;
   fileName: string;
   hasNote: boolean;
   targetConditionLabels: readonly string[];
+  recommendedConditionLabels: readonly string[];
 }) {
   const [sections, setSections] = useState<Set<ArtifactExportSection>>(
     () => new Set(sectionOptions.map(([value]) => value)),
   );
   const [includeNote, setIncludeNote] = useState(true);
+  const [recommendedCondition, setRecommendedCondition] = useState("0");
   const [targetCondition, setTargetCondition] = useState("0");
   const showNote = hasNote && includeNote;
   const entireSection = sections.size === sectionOptions.length;
@@ -49,6 +52,7 @@ export function ArtifactImageExport({
     .map(([value]) => `[data-artifact-export-section="${value}"]{display:none!important}`)
     .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 noteRule = showNote
     ? ""
     : '[data-artifact-export-section="note"]{display:none!important}';
@@ -122,6 +126,28 @@ export function ArtifactImageExport({
             </Field>
           ) : null}
         </FieldGroup>
+        {sections.has("best-stats") && recommendedConditionLabels.length > 1 ? (
+          <div className="flex flex-col gap-2">
+            <p className="text-sm font-medium">Recommended Stats condition</p>
+            <ToggleGroup
+              variant="outline"
+              value={[recommendedCondition]}
+              onValueChange={(values) => {
+                if (values[0]) setRecommendedCondition(values[0]);
+              }}
+            >
+              {recommendedConditionLabels.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">Target Stats condition</p>
@@ -151,7 +177,7 @@ export function ArtifactImageExport({
           disabled={sections.size === 0}
           captureClassName="p-0"
         >
-          <style>{hiddenSections + targetRule + noteRule + hideEmptyRightColumn + layoutRules}</style>
+          <style>{hiddenSections + targetRule + recommendedRule + noteRule + hideEmptyRightColumn + layoutRules}</style>
           {children}
         </GuideImageExport>
       </DialogContent>