feat : update

components/public/structured-guide.tsx

@@ -198,9 +198,10 @@ function GuideOverview({
   guide: PublicGuide;
   sections: ReturnType<typeof publicSections>;
 }) {
-  const youtubeVideo = guide.youtubeUrl
-    ? parseYouTubeUrl(guide.youtubeUrl)
-    : null;
+  const youtubeVideos = guide.youtubeUrls.flatMap((url) => {
+    const video = parseYouTubeUrl(url);
+    return video ? [video] : [];
+  });
 
   return (
     <div className="flex flex-col gap-8">
@@ -222,7 +223,7 @@ function GuideOverview({
         <div className="order-3 lg:col-start-2 lg:row-start-1">
           <GuideNavigation guide={guide} sections={sections} />
         </div>
-        {guide.posterArtUrl || youtubeVideo ? (
+        {guide.posterArtUrl || youtubeVideos.length ? (
           <>
           {guide.posterArtUrl ? (
             <section className="order-2 flex flex-col items-center gap-3 lg:col-start-1 lg:row-start-2">
@@ -256,34 +257,28 @@ function GuideOverview({
               </GuideImageExport>
             </section>
           ) : null}
-          {youtubeVideo ? (
-            <section className="order-4 flex flex-col items-center gap-3 lg:col-start-2 lg:row-start-2">
-              <div className="aspect-video w-full overflow-hidden rounded-xl border bg-muted">
-                <iframe
-                  src={youtubeVideo.embedUrl}
-                  title={`วิดีโอไกด์ ${guide.name}`}
-                  loading="lazy"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  referrerPolicy="strict-origin-when-cross-origin"
-                  allowFullScreen
-                  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>
+          {youtubeVideos.length ? (
+            <div className="order-4 flex flex-col gap-6 lg:col-start-2 lg:row-start-2">
+              {youtubeVideos.map((youtubeVideo, index) => (
+                <section key={`${youtubeVideo.videoId}-${index}`} className="flex flex-col items-center gap-3">
+                  <div className="aspect-video w-full overflow-hidden rounded-xl border bg-muted">
+                    <iframe
+                      src={youtubeVideo.embedUrl}
+                      title={`วิดีโอไกด์ ${guide.name} ${index + 1}`}
+                      loading="lazy"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      referrerPolicy="strict-origin-when-cross-origin"
+                      allowFullScreen
+                      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>
           ) : null}
           </>
         ) : null}