feat : add thanks page

components/admin/guide-overview-form.tsx

@@ -47,9 +47,8 @@ export function GuideOverviewForm({
     id: guide.coverMediaId,
     url: guide.coverUrl,
   });
-  const invalidYoutubeUrl = Boolean(
-    youtubeUrl.trim() && !parseYouTubeUrl(youtubeUrl.trim()),
-  );
+  const youtubeVideo = parseYouTubeUrl(youtubeUrl.trim());
+  const invalidYoutubeUrl = Boolean(youtubeUrl.trim() && !youtubeVideo);
   const value = { coverMediaId: cover.id, overview, youtubeUrl };
   const incompleteIssues = [
     !cover.id ? "กรุณาอัปโหลด Guide Image" : null,
@@ -156,6 +155,19 @@ export function GuideOverviewForm({
             {invalidYoutubeUrl ? (
               <FieldError>กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง</FieldError>
             ) : null}
+            {youtubeVideo ? (
+              <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>
+            ) : null}
           </Field>
         </FieldGroup>
       </CardContent>