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

type num = {
백승민's avatar
백승민 committed
4
    total: number,
백승민's avatar
백승민 committed
5
    page: number, 
백승민's avatar
백승민 committed
6
    setPage : Function
백승민's avatar
백승민 committed
7
}
백승민's avatar
백승민 committed
8
9
    
export function PaginationLeft ({total, page,setPage} : num) {
백승민's avatar
백승민 committed
10
    const numPages = Math.ceil(total / 15);
백승민's avatar
백승민 committed
11
12
13
14
15

    const left =()=>{
        setPage(page - 1)
    };

백승민's avatar
백승민 committed
16
17
    return (
        <div>
백승민's avatar
백승민 committed
18
19
            <button onClick={left} disabled={page === 1}>
                &lt;{page}</button>
백승민's avatar
백승민 committed
20

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

    const right =()=>{
        setPage(page + 1)
    };
백승민's avatar
백승민 committed
37

백승민's avatar
백승민 committed
38
39
    return (
        <div>
백승민's avatar
백승민 committed
40
            <button onClick={right} disabled={page === numPages}>
백승민's avatar
백승민 committed
41
42
43
44
45
                &gt;
            </button>
        </div>
    );
};