28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import { Link } from '@inertiajs/react';
|
|
|
|
type PaginationLink = {
|
|
url: string | null;
|
|
label: string;
|
|
active: boolean;
|
|
};
|
|
|
|
export function Pagination({ links }: { links: PaginationLink[] }) {
|
|
return (
|
|
<nav className="flex items-center justify-center space-x-2">
|
|
{links.map((link, index) => (
|
|
<Link
|
|
key={index}
|
|
href={link.url || '#'}
|
|
preserveScroll
|
|
className={`inline-flex h-10 items-center justify-center rounded-md border px-4 text-sm font-medium ${
|
|
link.active
|
|
? 'bg-primary text-primary-foreground border-primary'
|
|
: 'border-neutral-200 hover:bg-neutral-100 dark:border-neutral-800 dark:hover:bg-neutral-800'
|
|
} ${!link.url ? 'pointer-events-none opacity-50' : ''}`}
|
|
dangerouslySetInnerHTML={{ __html: link.label }}
|
|
/>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|