54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|