perf(home): shrink carousel client boundary

2026-08-09 21:37:25 +07:00
parent c0429a8e8e
commit 916aaf92ef
3 changed files with 127 additions and 70 deletions
@@ -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>
+  );
+}