picpagination.tsx 1.08 KB
Newer Older
백승민's avatar
백승민 committed
1
2
3
import React from "react";

type num = {
백승민's avatar
백승민 committed
4
    total: number,
백승민's avatar
백승민 committed
5
6
7
8
    page: number, 
    setPage: Function
}

백승민's avatar
백승민 committed
9
10
11
12
export function PaginationLeft ({total, page, setPage} : num) {
    const numPages = Math.ceil(total / 15);
// export function PaginationLeft ({ page, setPage} : num) {
//     const numPages = 3
백승민's avatar
백승민 committed
13
14
15
    return (
        <div>
            <button onClick={() => setPage(page - 1)} disabled={page === 1}>
백승민's avatar
백승민 committed
16
                &lt;{page}
백승민's avatar
백승민 committed
17
18
            </button>

백승민's avatar
백승민 committed
19
            {/* {Array(numPages)
백승민's avatar
백승민 committed
20
21
22
23
24
                .fill(1)
                .map((_, i) => (
                    <button key={i + 1} onClick={() => setPage(i + 1)}>
                        {i + 1}
                    </button>
백승민's avatar
백승민 committed
25
                ))} */}
백승민's avatar
백승민 committed
26
27
28
        </div>
    );
};
백승민's avatar
백승민 committed
29
30
31
32
export function PaginationRight ({total, page, setPage} : num) {
    const numPages = Math.ceil(total / 15);
// export function PaginationRight ({ page, setPage} : num) {
//     const numPages = 3;
백승민's avatar
백승민 committed
33

백승민's avatar
백승민 committed
34
35
    return (
        <div>
백승민's avatar
백승민 committed
36
37
38
39
40
41
            <button onClick={() => setPage(page + 1)} disabled={page === numPages}>
                &gt;
            </button>
        </div>
    );
};