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.

64 lines
1.8 KiB
JavaScript

import { router } from '@inertiajs/react'
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-gray-700 focus:text-gray-700 border-gray-600 bg-gray-600 text-white hover:bg-gray-400"
}`;
const onClick = () => {
router.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 }, index) => {
return url === null ? (
<PageInactive key={`${label}-${index}`} label={label} />
) : (
<PageLink
key={label}
label={label}
active={active}
url={url}
params={params}
/>
)
})}
</div>
)
};