feat ; adding chart viewing type to weapon

components/public/structured-guide.tsx

@@ -4,7 +4,6 @@ import { ArrowUpRightIcon, ChevronLeftIcon } from "lucide-react";
 import type { ReactNode } from "react";
 
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardAction,
@@ -28,6 +27,8 @@ import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { TeamArtifactIcon, TeamSearch } from "@/components/public/team-search";
 import { GuideImageExport } from "@/components/public/guide-image-export";
 import { WeaponImageExport } from "@/components/public/weapon-image-export";
+import { WeaponChart } from "@/components/public/weapon-chart";
+import { WeaponDisplayMode, WeaponDisplayModeProvider } from "@/components/public/weapon-display-mode";
 import { ArtifactImageExport } from "@/components/public/artifact-image-export";
 import { GuideExportBranding } from "@/components/public/guide-export-branding";
 import { ConstellationImage } from "@/components/public/constellation-image";
@@ -277,10 +278,6 @@ function GuideOverview({
                       className="size-full"
                     />
                   </div>
-                  <Button variant="outline" render={<a href={youtubeVideo.watchUrl} target="_blank" rel="noopener noreferrer" />} nativeButton={false}>
-                    ดูวิดีโอต้นฉบับบน YouTube
-                    <ArrowUpRightIcon data-icon="inline-end" />
-                  </Button>
                 </section>
               ))}
             </div>
@@ -438,6 +435,7 @@ function WeaponSectionContent({
           ) : null}
         </div>
       </header>
+      <WeaponDisplayModeProvider>
       <ConditionSwitcher
         label="เลือกเงื่อนไขอาวุธ"
         labels={weaponGroups.map((group, index) => group.name || `Condition ${index + 1}`)}
@@ -459,6 +457,7 @@ function WeaponSectionContent({
           ) : null}
         </div>
         {group.note ? <p className="whitespace-pre-wrap text-muted-foreground">{group.note}</p> : null}
+        <WeaponDisplayMode exporting={exporting} chart={!exporting ? <WeaponChart rows={group.rows} /> : null}>
         <div
           className={cn("grid gap-3", useCompactExportGrid && "grid-cols-2")}
         >
@@ -598,9 +597,11 @@ function WeaponSectionContent({
           </Card>
         ))}
       </div>
+        </WeaponDisplayMode>
       </div>
       ))}
       </ConditionSwitcher>
+      </WeaponDisplayModeProvider>
     </section>
   );
 }