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>

components/public/team-search.tsx

@@ -284,7 +284,7 @@ function TeamCard({
                       tabIndex={exporting ? -1 : undefined}
                       aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
                       className={cn(
-                        "relative col-span-2 aspect-square scale-110 overflow-hidden rounded-md bg-muted outline-none",
+                        "relative aspect-square scale-110 overflow-hidden rounded-md bg-muted outline-none sm:col-span-2",
                         rarityGradientClass(member.weapon.rarity),
                       )}
                     >
@@ -303,7 +303,7 @@ function TeamCard({
                       </Kbd>
                     </a>
                   ) : (
-                    <div className="col-span-2 aspect-square rounded-md border bg-muted" />
+                    <div className="aspect-square rounded-md border bg-muted sm:col-span-2" />
                   )}
                   <TeamArtifactIcon
                     first={member.artifact}
@@ -311,7 +311,7 @@ function TeamCard({
                     eager={exporting}
                     linked={!exporting}
                     sizes="64px"
-                    className="col-span-2"
+                    className="sm:col-span-2"
                   />
                 </div>
               </div>