feat : add thanks page

app/thanks/page.tsx

@@ -0,0 +1,181 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { ExternalLinkIcon } from "lucide-react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+type ThanksProfile = {
+  username: string;
+  role: string;
+  profile: string;
+  link: string;
+};
+
+const specialThanks: ThanksProfile[] = [
+
+   {
+    username: "Buzz",
+    role: "Calculator & Guide Creator",
+    profile: "buzz.png",
+    link: "https://www.youtube.com/@Genshinmaichaigamemurtur",
+   },
+   {
+    username: "Gunshin",
+    role: "Developer",
+    profile: "gunshin.gif",
+    link: "https://gunshiz.top"
+   },
+   {
+     username: "Keqing Kung",
+     role: "Data Entry",
+     profile: "keqing.png",
+     link: "https://discord.com/users/860156010361520138",
+   },
+   {
+    username: "Mple",
+    role: "Data Entry",
+    profile: "mple.png",
+    link: "https://discord.com/users/527126736651943946",
+   }
+];
+
+export const metadata: Metadata = {
+  title: "Special Thanks",
+  description: "ขอบคุณทุกคนที่มีส่วนช่วยให้ Buzz Guide เกิดขึ้นได้",
+};
+
+function getInitials(username: string) {
+  return username.trim().slice(0, 2).toUpperCase();
+}
+
+export default function ThanksPage() {
+  return (
+    <div className="min-h-svh bg-background">
+      <header className="border-b">
+        <div className="mx-auto flex min-h-16 w-full max-w-6xl items-center px-4 sm:px-6">
+          <Link
+            href="/"
+            className="flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Image
+              src="/icon.png"
+              alt=""
+              width={36}
+              height={36}
+              className="size-9 object-contain"
+            />
+            <span>ไกด์เกนชินไม่ใช่เกมมือถือ</span>
+          </Link>
+        </div>
+      </header>
+
+      <main className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-12 sm:px-6 sm:py-16">
+        <header className="mx-auto flex max-w-2xl flex-col gap-3 text-center">
+          <h1 className="font-heading text-4xl font-semibold tracking-tight sm:text-5xl">
+            Special Thanks
+          </h1>
+          <p className="text-lg leading-8 text-muted-foreground">
+            ขอบคุณทุกคนที่มอบแรงสนับสนุนและเวลาให้เว็บไซต์นี้เกิดขึ้นได้
+          </p>
+        </header>
+
+        <Card className="w-full gap-0 py-0 sm:flex-row sm:items-center">
+          <CardHeader className="grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1 py-4 text-left sm:flex-1">
+            <Image
+              src="/thanks/astral.png"
+              alt="Astral Hosting"
+              width={128}
+              height={128}
+              className="row-span-2 size-16 object-contain"
+            />
+            <CardTitle className="text-xl sm:text-2xl">
+              Astral Hosting
+            </CardTitle>
+            <CardDescription className="font-medium">
+              ผู้สนับสนุนหลักด้าน Hosting
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="pb-4 sm:max-w-md sm:py-4">
+            <p className="leading-6 text-muted-foreground">
+              ขอบคุณที่สนับสนุนระบบ Hosting ให้ Buzz Guide ออนไลน์และพร้อมใช้งาน
+            </p>
+          </CardContent>
+          <CardFooter className="justify-center sm:self-stretch sm:border-t-0 sm:border-l">
+            <Button
+              nativeButton={false}
+              render={
+                <Link href="https://astrxl.dev" target="_blank" rel="noreferrer" />
+              }
+            >
+              เยี่ยมชม Astral
+              <ExternalLinkIcon data-icon="inline-end" />
+            </Button>
+          </CardFooter>
+        </Card>
+
+        {specialThanks.length > 0 ? (
+          <section
+            aria-label="รายชื่อผู้สนับสนุน"
+            className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          >
+            {specialThanks.map((person) => (
+              <Card key={person.username}>
+                <CardHeader className="justify-items-center text-center">
+                  <Avatar className="size-20">
+                    <AvatarImage
+                      src={`/thanks/${person.profile}`}
+                      alt={`รูปโปรไฟล์ของ ${person.username}`}
+                    />
+                    <AvatarFallback>{getInitials(person.username)}</AvatarFallback>
+                  </Avatar>
+                  <CardTitle className="mt-2">{person.username}</CardTitle>
+                  {person.role ? (
+                    <CardDescription>{person.role}</CardDescription>
+                  ) : null}
+                </CardHeader>
+                <CardContent>
+                  <p className="text-center text-muted-foreground">
+                    ขอบคุณที่เป็นส่วนสำคัญของ Buzz Guide
+                  </p>
+                </CardContent>
+                <CardFooter>
+                  <Button
+                    className="w-full"
+                    variant="outline"
+                    nativeButton={false}
+                    render={
+                      <a
+                        href={person.link}
+                        target="_blank"
+                        rel="noreferrer"
+                      />
+                    }
+                  >
+                    ดูโปรไฟล์
+                    <ExternalLinkIcon data-icon="inline-end" />
+                  </Button>
+                </CardFooter>
+              </Card>
+            ))}
+          </section>
+        ) : (
+            <div>I am sigma number one</div>
+        )}
+      </main>
+    </div>
+  );
+}

components/admin/guide-overview-form.tsx

@@ -47,9 +47,8 @@ export function GuideOverviewForm({
     id: guide.coverMediaId,
     url: guide.coverUrl,
   });
-  const invalidYoutubeUrl = Boolean(
+  const youtubeVideo = parseYouTubeUrl(youtubeUrl.trim());
-    youtubeUrl.trim() && !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>