-
Notifications
You must be signed in to change notification settings - Fork 2k
/
index.tsx
122 lines (113 loc) · 3.59 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react';
import { useState } from 'react';
type PaginationProps = {
totalItems: number;
itemsPerPage: number;
onPageChange: (page: number) => void;
};
export default function Pagination({ totalItems, itemsPerPage, onPageChange }: PaginationProps) {
const totalPage = Math.ceil(totalItems / itemsPerPage);
const [currentPage, setCurrentPage] = useState(1);
const goToPage = (page: number) => {
if (page >= 1 && page <= totalPage) {
setCurrentPage(page);
onPageChange(page);
}
};
const handlePrevPage = () => {
goToPage(currentPage - 1);
};
const handleNextPage = () => {
goToPage(currentPage + 1);
};
const buttonStyle: FlexProps = {
justifyContent: 'center',
alignItems: 'center',
w: '24px',
h: '24px',
borderRadius: '50%'
};
if (totalPage === 0) {
return <></>;
}
return (
<Flex h="32px" ml="auto" align="center" mt="20px">
<Text>Total:</Text>
<Flex w="40px">{totalItems}</Flex>
<Flex gap="8px" alignItems={'center'}>
<Flex
onClick={handlePrevPage}
{...buttonStyle}
{...{
bg: currentPage === 1 ? '#EDF0F2' : '#EDEFF1',
cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
opacity: currentPage === 1 ? '0.5' : '1'
}}
>
<Icon viewBox="0 0 12 12" fill={currentPage === 1 ? 'black' : '#262A32'}>
<path d="M9.205 8.295L6.91 6L9.205 3.705L8.5 3L5.5 6L8.5 9L9.205 8.295ZM3 3H4V9H3V3Z" />
</Icon>
</Flex>
<Flex
{...buttonStyle}
{...{
bg: currentPage === 1 ? '#EDF0F2' : '#EDEFF1',
cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
opacity: currentPage === 1 ? '0.5' : '1'
}}
onClick={() => goToPage(1)}
>
<Icon viewBox="0 0 12 12" fill={currentPage === 1 ? 'black' : '#262A32'}>
<path
d="M5.414 5.99999L7.889 8.47499L7.182 9.18199L4 5.99999L7.182 2.81799L7.889 3.52499L5.414 5.99999Z"
fill="#262A32"
/>
</Icon>
</Flex>
<Text>
{currentPage}/{totalPage}
</Text>
<Flex
{...buttonStyle}
{...{
bg: currentPage === totalPage ? '#EDF0F2' : '#EDEFF1',
cursor: currentPage === totalPage ? 'not-allowed' : 'pointer',
opacity: currentPage === totalPage ? '0.5' : '1'
}}
onClick={handleNextPage}
>
<Icon
viewBox="0 0 12 12"
fill={currentPage === 1 ? 'black' : '#262A32'}
transform="rotate(180deg)"
>
<path
d="M5.414 5.99999L7.889 8.47499L7.182 9.18199L4 5.99999L7.182 2.81799L7.889 3.52499L5.414 5.99999Z"
fill="#262A32"
/>
</Icon>
</Flex>
<Flex
mr="10px"
{...buttonStyle}
{...{
bg: currentPage === totalPage ? '#EDF0F2' : '#EDEFF1',
cursor: currentPage === totalPage ? 'not-allowed' : 'pointer',
opacity: currentPage === totalPage ? '0.5' : '1'
}}
onClick={() => goToPage(totalPage)}
>
<Icon
viewBox="0 0 12 12"
transform="rotate(180deg)"
fill={currentPage === 1 ? 'black' : '#262A32'}
>
<path d="M9.205 8.295L6.91 6L9.205 3.705L8.5 3L5.5 6L8.5 9L9.205 8.295ZM3 3H4V9H3V3Z" />
</Icon>
</Flex>
</Flex>
<Text>{itemsPerPage}</Text>
<Text>/Page</Text>
</Flex>
);
}