perf(home): shrink carousel client boundary

components/LinkCard.tsx

@@ -1,14 +1,15 @@
-"use client";
-
-import { useState } from "react";
 import type { ComponentType, SVGProps } from "react";
 import { Button } from "@/components/ui/button";
-import { CardContent } from "@/components/ui/card";
 import Link from "next/link";
-import { ArrowLeft, ArrowRight, Trophy } from "lucide-react";
-import { LinkConfig, type IconName } from "@/lib/config";
-import { getCountForLink, formatCount, FollowerCounts } from "@/lib/followers/utils";
+import { Trophy } from "lucide-react";
+import type { LinkConfig, IconName } from "@/lib/config";
+import {
+  getCountForLink,
+  formatCount,
+  type FollowerCounts,
+} from "@/lib/followers/utils";
 import { RobloxIcon, DiscordIcon, TiktokIcon, YoutubeIcon, FormIcon, DonateIcon } from "@/lib/icons";
+import { LinkCarousel } from "@/components/link-carousel";
 
 const iconMap: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> = {
   roblox: RobloxIcon,
@@ -20,71 +21,74 @@ const iconMap: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> = {
   leaderboard: Trophy,
 };
 
-export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, links1: LinkConfig[], links2: LinkConfig[] }) {
-  const [isPage2, setIsPage2] = useState(false);
-  const currentLinks = isPage2 ? links2 : links1;
-
+function LinkList({
+  counts,
+  label,
+  links,
+}: {
+  counts: FollowerCounts;
+  label: string;
+  links: readonly LinkConfig[];
+}) {
   return (
-    <CardContent>
-      <div key={isPage2 ? "p2" : "p1"} className="animate-in fade-in slide-in-from-bottom-2 duration-150">
-        <nav aria-label="ลิ้งค์โซเชียลมีเดีย" className="flex flex-col gap-3">
-          {currentLinks.map((item, index) => {
-            const IconComponent = iconMap[item.icon];
-            const isDonate = item.icon === "donate";
+    <nav aria-label={label} className="flex flex-col gap-3">
+      {links.map((item) => {
+        const IconComponent = iconMap[item.icon];
+        const count = getCountForLink(item.name, counts);
+        const external = !item.link.startsWith("/");
 
-            const count = getCountForLink(item.name, counts);
-
-            return (
-              <Button
-                key={index}
-                variant="outline"
-                className="w-full h-12 p-4 group md:bg-muted bg-black/60 "
-                asChild
-              >
-                <Link href={item.link} target={item.link.startsWith("/") ? undefined : "_blank"} rel={item.link.startsWith("/") ? undefined : "noopener noreferrer"} >
-                  <div className="flex items-center justify-between w-full">
-                    <div className="flex items-center gap-3">
-                      <div className="shrink-0 w-8 h-8 flex items-center justify-center">
-                        <IconComponent className="w-6 h-6 text-zinc-300" />
-                      </div>
-                      <div className="flex flex-col items-start text-left">
-                        <span className="font-medium text-zinc-100">{item.name}</span>
-                        {item.desc && <span className="text-xs text-zinc-400">{item.desc}</span>}
-                      </div>
-                    </div>
-                    {isDonate ? (
-                      <span className="text-xs font-medium shrink-0 text-zinc-400">ขี้นจอ 10 บาท+</span>
-                    ) : count !== null && (
-                      <span className="text-xs font-medium shrink-0">
-                        {formatCount(count.count)} 
-                        <span className="text-zinc-400"> {count.label}</span>
+        return (
+          <Button
+            key={item.link}
+            variant="outline"
+            className="group h-12 w-full bg-black/60 p-4 transition-colors hover:border-primary/50 hover:bg-accent/80 md:bg-muted"
+            asChild
+          >
+            <Link
+              href={item.link}
+              target={external ? "_blank" : undefined}
+              rel={external ? "noopener noreferrer" : undefined}
+            >
+              <span className="flex w-full items-center justify-between gap-3">
+                <span className="flex min-w-0 items-center gap-3">
+                  <span className="flex size-8 shrink-0 items-center justify-center">
+                    <IconComponent className="size-6 text-muted-foreground transition-colors group-hover:text-foreground" />
+                  </span>
+                  <span className="flex min-w-0 flex-col items-start text-left">
+                    <span className="truncate font-medium text-foreground">
+                      {item.name}
+                    </span>
+                    {item.desc && (
+                      <span className="truncate text-xs text-muted-foreground">
+                        {item.desc}
                       </span>
                     )}
-                  </div>
-                </Link>
-              </Button>
-            );
-          })}
-        </nav>
-      </div>
-      <div className="flex justify-between items-center pt-4">
-        <Button 
-          variant="ghost" 
-          onClick={() => setIsPage2(false)}
-          disabled={!isPage2}
-          aria-label="หน้าก่อนหน้า"
-        >
-          <ArrowLeft />
-        </Button>
-        <Button 
-          variant="ghost" 
-          onClick={() => setIsPage2(true)}
-          disabled={isPage2}
-          aria-label="หน้าถัดไป"
-        >
-          <ArrowRight />
-        </Button>
-      </div>
-    </CardContent>
+                  </span>
+                </span>
+                {item.icon === "donate" ? (
+                  <span className="shrink-0 text-xs font-medium text-muted-foreground">
+                    ขึ้นจอ 10 บาท+
+                  </span>
+                ) : count !== null ? (
+                  <span className="shrink-0 text-xs font-medium">
+                    {formatCount(count.count)}{" "}
+                    <span className="text-muted-foreground">{count.label}</span>
+                  </span>
+                ) : null}
+              </span>
+            </Link>
+          </Button>
+        );
+      })}
+    </nav>
+  );
+}
+
+export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts; links1: readonly LinkConfig[]; links2: readonly LinkConfig[] }) {
+  return (
+    <LinkCarousel
+      primary={<LinkList counts={counts} label="ลิงก์หลัก" links={links1} />}
+      secondary={<LinkList counts={counts} label="ลิงก์เพิ่มเติม" links={links2} />}
+    />
   );
 }

components/link-carousel.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
+
+export function LinkCarousel({
+  primary,
+  secondary,
+}: {
+  primary: ReactNode;
+  secondary: ReactNode;
+}) {
+  const [page, setPage] = useState<0 | 1>(0);
+
+  return (
+    <CardContent>
+      <div
+        key={page}
+        className="animate-in fade-in slide-in-from-bottom-2 duration-150"
+      >
+        {page === 0 ? primary : secondary}
+      </div>
+      <div className="flex items-center justify-between gap-3 pt-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setPage(0)}
+          disabled={page === 0}
+          aria-label="หน้าก่อนหน้า"
+        >
+          <ArrowLeft />
+        </Button>
+        <span
+          className="text-xs font-medium text-muted-foreground"
+          aria-live="polite"
+        >
+          {page + 1} / 2
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setPage(1)}
+          disabled={page === 1}
+          aria-label="หน้าถัดไป"
+        >
+          <ArrowRight />
+        </Button>
+      </div>
+    </CardContent>
+  );
+}