You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import Link from "next/link";
|
|
import { cn } from "cn";
|
|
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
|
|
type PaginationProps = {
|
|
page: number;
|
|
hasNext: boolean;
|
|
hrefPage: (page: number) => string;
|
|
};
|
|
|
|
export function Pagination({ page, hasNext, hrefPage }: PaginationProps) {
|
|
return (
|
|
<div className="mt-4 flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">Halaman {page}</span>
|
|
<div className="flex gap-2">
|
|
<TombolHalaman href={page > 1 ? hrefPage(page - 1) : null}>
|
|
Sebelumnya
|
|
</TombolHalaman>
|
|
<TombolHalaman href={hasNext ? hrefPage(page + 1) : null}>
|
|
Berikutnya
|
|
</TombolHalaman>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TombolHalaman({
|
|
href,
|
|
children,
|
|
}: {
|
|
href: string | null;
|
|
children: ReactNode;
|
|
}) {
|
|
const className = buttonVariants({ variant: "outline", size: "sm" });
|
|
|
|
if (!href) {
|
|
return (
|
|
<span className={cn(className, "pointer-events-none opacity-50")}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link href={href} className={className}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|