Pagination.js 2.57 KB
Newer Older
kusang96's avatar
kusang96 committed
1
import { Pagination } from "react-bootstrap";
2
import React from 'react';
Kim, Subin's avatar
Kim, Subin committed
3

kusang96's avatar
kusang96 committed
4
function Paginations({ index, totalPages, handlePage }) {
Kim, Subin's avatar
Kim, Subin committed
5
6

    return (
kusang96's avatar
kusang96 committed
7
8
9
        <Pagination className="d-flex justify-content-center">
            <style type="text/css">
                {`
박상호's avatar
css    
박상호 committed
10
11
12
13
14
15
16
17
                @font-face {
                    font-family: 'Jal_Onuel';
                    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }
                body{font-family:'Jal_Onuel'}

kusang96's avatar
kusang96 committed
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
                .page-link, .page-link:hover {
                    color: #91877F;
                    margin: 0;
                    border: 0;
                }

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

                .page-item.active .page-link {
                    background-color: #CDC5C2;
                    border-color: #CDC5C2;
                    color: #fff;
                }
                `}
            </style>
kusang96's avatar
kusang96 committed
35
            <Pagination.First onClick={() => handlePage(1)} />
kusang96's avatar
css    
kusang96 committed
36
            {index === 1 ? <Pagination.Prev disabled /> : <Pagination.Prev onClick={()=>handlePage(index - 1)} />}
kusang96's avatar
kusang96 committed
37
38
            {index === totalPages && index > 4 ? <Pagination.Item onClick={()=>handlePage(index - 4)}>{index - 4}</Pagination.Item> : ""}
            {index > 3 && index >= totalPages-1 ? <Pagination.Item onClick={()=>handlePage(index - 3)}>{index - 3}</Pagination.Item> : ""}
kusang96's avatar
kusang96 committed
39
40
            {index < 3 ? "" : <Pagination.Item onClick={()=>handlePage(index - 2)}>{index - 2}</Pagination.Item>}
            {index === 1 ? "" : <Pagination.Item onClick={()=>handlePage(index - 1)}>{index - 1}</Pagination.Item>}
kusang96's avatar
kusang96 committed
41

kusang96's avatar
kusang96 committed
42
            <Pagination.Item active>{index}</Pagination.Item>
kusang96's avatar
kusang96 committed
43

kusang96's avatar
kusang96 committed
44
45
            {index === totalPages ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>}
            {index > totalPages-2 ? "" : <Pagination.Item onClick={()=>handlePage(index + 2)}>{index + 2}</Pagination.Item>}
kusang96's avatar
kusang96 committed
46
47
            {index <= totalPages-3 && index < 3 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
            {index <= totalPages-4 && index < 2 ? <Pagination.Item onClick={()=>handlePage(index + 4)}>{index + 4}</Pagination.Item> : ""}
kusang96's avatar
css    
kusang96 committed
48
            {index === totalPages ? <Pagination.Next disabled /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
kusang96's avatar
kusang96 committed
49

kusang96's avatar
kusang96 committed
50
            <Pagination.Last onClick={() =>handlePage(totalPages)} />
kusang96's avatar
kusang96 committed
51
        </Pagination>
Kim, Subin's avatar
Kim, Subin committed
52
    )
kusang96's avatar
kusang96 committed
53
}
kusang96's avatar
DSAD    
kusang96 committed
54

kusang96's avatar
kusang96 committed
55
export default Paginations