Paginations.js

import { Pagination } from "react-bootstrap";
import React from 'react';



function Paginations(props) {

    return (
        <>
            <style type="text/css">
                {`
                .page-link, .page-link:hover {
                    color: #17a2b8;
                    border: 0;
                }

                .page-link:focus {
                    box-shadow: 0 0 0 0;
                }

                .page-item.active .page-link {
                    background-color: #17a2b8;
                    color: #fff;
                }
                `}
            </style>
            {(props.endPage > 5) ?
                <Pagination >
                    <Pagination.First onClick={() => props.handlePage(1)} />
                    {props.index === 1 ? <Pagination.Prev onClick={() => props.handlePage(props.index)} /> : <Pagination.Prev onClick={() => props.handlePage(props.index - 1)} />}
                    {props.index === props.endPage - 1 ? <Pagination.Item onClick={() => props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
                    {props.index === props.endPage ? <Pagination.Item onClick={() => props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
                    {props.index === props.endPage ? <Pagination.Item onClick={() => props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
                    {props.index < 3 ? "" : <Pagination.Item onClick={() => props.handlePage(props.index - 2)}>{props.index - 2}</Pagination.Item>}
                    {props.index === 1 ? "" : <Pagination.Item onClick={() => props.handlePage(props.index - 1)}>{props.index - 1}</Pagination.Item>}

                    <Pagination.Item active>{props.index}</Pagination.Item>


                    {props.index === props.endPage ? "" : <Pagination.Item onClick={() => props.handlePage(props.index + 1)}>{props.index + 1}</Pagination.Item>}
                    {props.index > props.endPage - 2 ? "" : <Pagination.Item onClick={() => props.handlePage(props.index + 2)}>{props.index + 2}</Pagination.Item>}
                    {props.index === 1 ? <Pagination.Item onClick={() => props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
                    {props.index === 1 ? <Pagination.Item onClick={() => props.handlePage(props.index + 4)}>{props.index + 4}</Pagination.Item> : ""}
                    {props.index === 2 ? <Pagination.Item onClick={() => props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
                    {props.index === props.endPage ? "" : <Pagination.Next onClick={() => props.handlePage(props.index + 1)} />}

                    <Pagination.Last onClick={() => props.handlePage(props.endPage)} />
                </Pagination>
                :
                <Pagination>
                    {props.index === 1 ? "" : <Pagination.First onClick={() => props.handlePage(1)} />}
                    {props.index === 1 ? "" : <Pagination.Prev onClick={() => props.handlePage(props.index - 1)} />}
                    <Pagination.Item onClick={() => props.handlePage(1)} active={props.index === 1}>1</Pagination.Item>
                    {props.endPage > 1 ? <Pagination.Item onClick={() => props.handlePage(2)} active={props.index === 2}>2</Pagination.Item> : ""}
                    {props.endPage > 2 ? <Pagination.Item onClick={() => props.handlePage(3)} active={props.index === 3}>3</Pagination.Item> : ""}
                    {props.endPage > 3 ? <Pagination.Item onClick={() => props.handlePage(4)} active={props.index === 4}>4</Pagination.Item> : ""}
                    {props.endPage > 4 ? <Pagination.Item onClick={() => props.handlePage(5)} active={props.index === 5}>5</Pagination.Item> : ""}
                    {props.index === props.endPage ? "" : <Pagination.Next onClick={() => props.handlePage(props.index + 1)} />}
                    {props.index === props.endPage ? "" : <Pagination.Last onClick={() => props.handlePage(props.endPage)} />}




                </Pagination>
            }
        </>
    )

}
export default Paginations