picpagination.tsx

import React, { useRef } from "react";

type num = {
    total: number,
    page: number,
    setPage: Function
}

export function Pagination({ total, page, setPage }: num) {
    const numPages = Math.ceil(total / 15);
    const firstLeftClick = useRef(true);
    const firstRightClick = useRef(true);

    const left = () => {
        if (firstLeftClick.current) {
            firstLeftClick.current = false;
            firstRightClick.current = true;
        } else {
            setPage(page - 1)
        }
    };

    const right = () => {
        if (firstRightClick.current) {
            firstLeftClick.current = true;
            firstRightClick.current = false;
        } else {
            setPage(page + 1)
        }
    };

    return (
        <div>
            <button onClick={left} disabled={page === 1}>
                &lt;{page}</button>

            {/* {Array(numPages)
                .fill(1)
                .map((_, i) => (
                    <button key={i + 1} onClick={() => setPage(i + 1)}>
                        {i + 1}
                    </button>
                ))} */}

            <button onClick={right} disabled={page === numPages}>
                &gt;
            </button>

        </div>
    );
};
// export function PaginationRight({ total, page, setPage }: num) {
//     const numPages = Math.ceil(total / 15);
//     const firstLeftClick = useRef(true);
//     const firstRightClick = useRef(true);


//     const right = () => {
//         if (firstRightClick.current) {
//             firstLeftClick.current = true;
//             firstRightClick.current = false;
//         } else {
//             setPage(page + 1)
//         }
//     };

//     return (
//         <div>
//             <button onClick={right} disabled={page === numPages}>
//                 &gt;
//             </button>
//         </div>
//     );
// };