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>

components/public/structured-guide.tsx

@@ -63,7 +63,8 @@ function hasSection(guide: PublicGuide, slug: string): boolean {
       guide.artifactGroups.some((group) => group.rows.length > 0) ||
       Boolean(
         guide.artifactProfile &&
-        (guide.artifactProfile.sands.length ||
+        (guide.artifactProfile.recommendedConditions.some((condition) => condition.sands.length || condition.goblet.length || condition.circlet.length || condition.substats.length) ||
+          guide.artifactProfile.sands.length ||
           guide.artifactProfile.goblet.length ||
           guide.artifactProfile.circlet.length ||
           guide.artifactProfile.substats.length ||
@@ -615,6 +616,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
         <ArtifactImageExport
           fileName={`${guide.name}-Artifact.png`}
           hasNote={Boolean(guide.artifactProfile?.note)}
+          recommendedConditionLabels={(guide.artifactProfile?.recommendedConditions ?? []).map((group, index) => group.name || `Condition ${index + 1}`)}
           targetConditionLabels={targetConditions.map((group, index) => group.name || `Condition ${index + 1}`)}
         >
           <ArtifactSectionContent guide={guide} exporting />
@@ -634,6 +636,63 @@ function ArtifactSectionContent({
   exporting?: boolean;
 }) {
   const profile = guide.artifactProfile;
+  const recommendedConditions = profile?.recommendedConditions ?? [];
+  const recommendedCards = recommendedConditions.map((condition, conditionIndex) => (
+    <div key={conditionIndex} data-artifact-export-section="best-stats" data-recommended-condition={conditionIndex} className="flex flex-col gap-5">
+      {exporting && recommendedConditions.length > 1 ? <p className="text-sm font-medium">{condition.name || `Condition ${conditionIndex + 1}`}</p> : null}
+      {condition.note ? <p className="whitespace-pre-wrap text-sm text-muted-foreground">{condition.note}</p> : null}
+      {profile ? (
+        <Card data-artifact-export-section="best-stats" className="artifact-export-main-stats overflow-hidden pt-0">
+          <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
+            <CardTitle className="text-2xl">ออฟหลักที่ดีที่สุด</CardTitle>
+          </CardHeader>
+          <CardContent className="grid grid-cols-3 p-0">
+            <ArtifactStat
+              iconSrc="/icon/Icon_Sands_of_Eon.webp"
+              label="นาฬิกา"
+              values={condition.sands}
+              exporting={exporting}
+              elementIconUrls={guide.elementIconUrls}
+            />
+            <ArtifactStat
+              iconSrc="/icon/Icon_Goblet_of_Eonothem.webp"
+              label="ถ้วย"
+              values={condition.goblet}
+              exporting={exporting}
+              elementIconUrls={guide.elementIconUrls}
+            />
+            <ArtifactStat
+              iconSrc="/icon/Icon_Circlet_of_Logos.webp"
+              label="หัว"
+              values={condition.circlet}
+              exporting={exporting}
+              elementIconUrls={guide.elementIconUrls}
+            />
+          </CardContent>
+        </Card>
+      ) : null}
+      {condition.substats.length ? (
+        <Card data-artifact-export-section="best-stats" className="artifact-export-substats">
+          <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
+            <strong>ออฟรองที่ดีที่สุด</strong>
+            <div className="flex flex-col items-center gap-1">
+              {condition.substats.map((stat, index) => (
+                <ArtifactStatValue
+                  key={`${stat}-${index}`}
+                  value={stat}
+                  index={index}
+                  exporting={exporting}
+                  elementIconUrls={guide.elementIconUrls}
+                />
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      ) : null}
+
+    </div>
+  ));
+
   return (
     <section
       className={cn(
@@ -680,54 +739,11 @@ function ArtifactSectionContent({
       >
         {" "}
         <div className="artifact-export-left flex flex-col gap-5">
-          {profile ? (
-            <Card data-artifact-export-section="best-stats" className="artifact-export-main-stats overflow-hidden pt-0">
-              <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
-                <CardTitle className="text-2xl">ออฟหลักที่ดีที่สุด</CardTitle>
-              </CardHeader>
-              <CardContent className="grid grid-cols-3 p-0">
-                <ArtifactStat
-                  iconSrc="/icon/Icon_Sands_of_Eon.webp"
-                  label="นาฬิกา"
-                  values={profile.sands}
-                  exporting={exporting}
-                  elementIconUrls={guide.elementIconUrls}
-                />
-                <ArtifactStat
-                  iconSrc="/icon/Icon_Goblet_of_Eonothem.webp"
-                  label="ถ้วย"
-                  values={profile.goblet}
-                  exporting={exporting}
-                  elementIconUrls={guide.elementIconUrls}
-                />
-                <ArtifactStat
-                  iconSrc="/icon/Icon_Circlet_of_Logos.webp"
-                  label="หัว"
-                  values={profile.circlet}
-                  exporting={exporting}
-                  elementIconUrls={guide.elementIconUrls}
-                />
-              </CardContent>
-            </Card>
-          ) : null}
-          {profile?.substats.length ? (
-            <Card data-artifact-export-section="best-stats" className="artifact-export-substats">
-              <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
-                <strong>ออฟรองที่ดีที่สุด</strong>
-                <div className="flex flex-col items-center gap-1">
-                  {profile.substats.map((stat, index) => (
-                    <ArtifactStatValue
-                      key={`${stat}-${index}`}
-                      value={stat}
-                      index={index}
-                      exporting={exporting}
-                      elementIconUrls={guide.elementIconUrls}
-                    />
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          ) : null}
+          {exporting ? recommendedCards : (
+            <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะแนะนำ" labels={recommendedConditions.map((condition, index) => condition.name || `Condition ${index + 1}`)}>
+              {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}>