pagination.js

import Link from "next/link";
import styled from "styled-components";

import Row from "@app/layouts/Row";

const StyledPager = styled(Row)`
	justify-content: center;
	min-width: 200px;
	max-width: 400px;
	margin: 1em auto 2em auto;
	text-align: center;
	border-radius: 20px;
	border: 1px solid #dddfe2;

	> div {
		width: 300px;
		padding: 0 0 0 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		font-size: 2em;
		background-color: #ffffff;
		cursor: pointer;
		transition: opacity 0.1s ease-in;

		a {
			padding: 0 1.5em;

			&:link,
			&:hover,
			&:active,
			&:visited {
				text-decoration: none;
			}
		}

		&:nth-child(2) {
			padding: 0.5em 0;
			font-size: 1.2em;
			cursor: default;

			span {
				font-size: 0.8em;
				display: inline-block;
				margin: 0 0.5em;
			}
		}

		&:first-child {
			border-radius: 20px 0 0 20px;
			border-right: 1px solid #eeeeee;
		}

		&:last-child {
			border-radius: 0 20px 20px 0;
			border-left: 1px solid #eeeeee;
		}

		&.inactive {
			background-color: #ffffff;
			cursor: default;
		}
	}
`;

const Pager = ({ page, totalPages }) => {
	// console.log({ page, totalPages });

	const hasPrev = page >= 2;
	const hasNext = page < totalPages;

	const nextPage = page + 1;
	const prevPage = page - 1;

	if (!totalPages || totalPages <= 1) return null;

	return (
		<StyledPager>
			{hasPrev ? (
				<div title="Previous results">
					<Link href={`?page=${prevPage}`}>
						<span class="material-symbols-rounded">
							chevron_left
						</span>
					</Link>
				</div>
			) : (
				<div className="inactive"></div>
			)}

			<div title={`${page} of ${totalPages} results`}>
				{" "}
				{page} <span> of </span> {totalPages}
			</div>

			{hasNext ? (
				<div className="link-color" title="Next results">
					{" "}
					<Link href={`?page=${nextPage}`}>
						<span class="material-symbols-rounded">
							chevron_right
						</span>
					</Link>
				</div>
			) : (
				<div className="inactive"></div>
			)}
		</StyledPager>
	);
};

export default Pager;