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.
monitor-doc/resources/js/Components/Pagination.jsx

62 lines
1.8 KiB
JavaScript

import { Inertia } from '@inertiajs/inertia'
import qs from 'qs'
const PageLink = ({ active, label, url, params }) => {
const className = `mr-1 mb-1 px-4 py-3 border border-solid border-gray-300 rounded text-sm bg-white hover:bg-white ${
active &&
'focus:outline-none focus:border-indigo-700 focus:text-indigo-700 border-indigo-600 bg-indigo-600 text-white hover:bg-indigo-400'
}`
const onClick = () => {
Inertia.get(
`${url}&${qs.stringify(params)}`,
{},
{
replace: true,
preserveState: true,
}
)
}
return (
<div className={className} onClick={onClick}>
<span dangerouslySetInnerHTML={{ __html: label }}></span>
</div>
)
}
// Previous, if on first page
// Next, if on last page
// and dots, if exists (...)
const PageInactive = ({ label }) => {
const className =
'mr-1 mb-1 px-4 py-3 text-sm border rounded border-solid border-gray-300 text-gray'
return (
<div
className={className}
dangerouslySetInnerHTML={{ __html: label }}
/>
)
}
export default ({ links = [], params = null }) => {
// dont render, if there's only 1 page (previous, 1, next)
if (links.length === 3) return null
return (
<div className="flex flex-wrap mt-6 -mb-1">
{links.map(({ active, label, url }) => {
return url === null ? (
<PageInactive key={label} label={label} />
) : (
<PageLink
key={label}
label={label}
active={active}
url={url}
params={params}
/>
)
})}
</div>
)
}