feat : add preview export image

components/public/artifact-image-export.tsx

@@ -72,6 +72,91 @@ export function ArtifactImageExport({
       : onlySection === "target-stats" || onlySection === "talents"
         ? ".artifact-export-grid{display:block!important}.artifact-export-right{width:560px!important;max-width:100%;margin-left:auto!important;margin-right:auto!important;justify-self:center!important}"
         : "";
+  const artifactOptions = (
+    <>
+      <FieldGroup>
+        <Field orientation="horizontal">
+          <Checkbox
+            id="artifact-export-entire"
+            checked={entireSection}
+            onCheckedChange={(checked) => setSections(
+              checked ? new Set(sectionOptions.map(([value]) => value)) : new Set(),
+            )}
+          />
+          <FieldLabel htmlFor="artifact-export-entire">ทั้งหมด</FieldLabel>
+        </Field>
+        {sectionOptions.map(([value, label]) => (
+          <Field key={value} orientation="horizontal">
+            <Checkbox
+              id={`artifact-export-${value}`}
+              checked={sections.has(value)}
+              onCheckedChange={(checked) => {
+                setSections((current) => {
+                  const next = new Set(current);
+                  if (checked) next.add(value);
+                  else next.delete(value);
+                  return next;
+                });
+              }}
+            />
+            <FieldLabel htmlFor={`artifact-export-${value}`}>{label}</FieldLabel>
+          </Field>
+        ))}
+      </FieldGroup>
+      {sections.has("best-stats") && recommendedConditionLabels.length > 1 ? (
+        <div className="flex flex-col gap-2">
+          <p className="text-sm font-medium">เงื่อนไขค่าสถานะแนะนำ</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("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>
+          <ToggleGroup
+            variant="outline"
+            value={[targetCondition]}
+            onValueChange={(values) => {
+              if (values[0]) setTargetCondition(values[0]);
+            }}
+          >
+            {targetConditionLabels.map((label, index) => (
+              <ToggleGroupItem
+                key={index}
+                value={String(index)}
+                className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
+              >
+                {label}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </div>
+      ) : null}
+    </>
+  );
 
   return (
     <Dialog>
@@ -79,94 +164,13 @@ export function ArtifactImageExport({
         <DownloadIcon data-icon="inline-start" />
         ส่งออกภาพ
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-h-[90svh] overflow-y-auto sm:w-fit sm:max-w-[calc(100%-2rem)]">
         <DialogHeader>
           <DialogTitle>เลือกข้อมูลสำหรับส่งออก</DialogTitle>
           <DialogDescription>
             เลือกได้หลายส่วน หรือเลือกทั้งหมดเพื่อส่งออกทุกส่วน
           </DialogDescription>
         </DialogHeader>
-        <FieldGroup>
-          <Field orientation="horizontal">
-            <Checkbox
-              id="artifact-export-entire"
-              checked={entireSection}
-              onCheckedChange={(checked) => setSections(
-                checked ? new Set(sectionOptions.map(([value]) => value)) : new Set(),
-              )}
-            />
-            <FieldLabel htmlFor="artifact-export-entire">ทั้งหมด</FieldLabel>
-          </Field>
-          {sectionOptions.map(([value, label]) => (
-            <Field key={value} orientation="horizontal">
-              <Checkbox
-                id={`artifact-export-${value}`}
-                checked={sections.has(value)}
-                onCheckedChange={(checked) => {
-                  setSections((current) => {
-                    const next = new Set(current);
-                    if (checked) next.add(value);
-                    else next.delete(value);
-                    return next;
-                  });
-                }}
-              />
-              <FieldLabel htmlFor={`artifact-export-${value}`}>{label}</FieldLabel>
-            </Field>
-          ))}
-        </FieldGroup>
-        {sections.has("best-stats") && recommendedConditionLabels.length > 1 ? (
-          <div className="flex flex-col gap-2">
-            <p className="text-sm font-medium">เงื่อนไขค่าสถานะแนะนำ</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("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>
-            <ToggleGroup
-              variant="outline"
-              value={[targetCondition]}
-              onValueChange={(values) => {
-                if (values[0]) setTargetCondition(values[0]);
-              }}
-            >
-              {targetConditionLabels.map((label, index) => (
-                <ToggleGroupItem
-                  key={index}
-                  value={String(index)}
-                  className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
-                >
-                  {label}
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
-          </div>
-        ) : null}
         <GuideImageExport
           fileName={fileName}
           width={exportWidth}
@@ -174,6 +178,8 @@ export function ArtifactImageExport({
           disabled={sections.size === 0}
           captureClassName="p-0"
           modeSelection="inline"
+          additionalOptions={artifactOptions}
+          previewPosition="right"
         >
           <style>{hiddenSections + targetRule + recommendedRule + tierRule + hideEmptyRightColumn + layoutRules}</style>
           {children}