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.
37 lines
1.3 KiB
JavaScript
37 lines
1.3 KiB
JavaScript
import { Link } from '@inertiajs/inertia-react';
|
|
|
|
const PageLink = ({ active, label, url }) => {
|
|
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'}`
|
|
|
|
return (
|
|
<Link className={className} href={url}>
|
|
<span dangerouslySetInnerHTML={{ __html: label }}></span>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
// 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 = [] }) => {
|
|
// 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} />
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}; |