pettycash/resources/js/Components/Pagination.jsx

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-gray-700 focus:text-gray-700 border-gray-600 bg-gray-600 text-white hover:bg-gray-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 }, index) => {
                return url === null ? (
                    <PageInactive key={`${label}-${index}`} label={label} />
                ) : (
                    <PageLink
                        key={label}
                        label={label}
                        active={active}
                        url={url}
                        params={params}
                    />
                )
            })}
        </div>
    )
};