front/dev

FRONT/DEV/src/components/UI/Pagination.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from "styled-components";
+import {buttonNames} from "../../const/buttons/names";
+import {IconComponent} from "../../const/buttons/icons";
+
+const PaginateWrapper = styled.div`
+    width: 100%;
+    margin-top: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+`
+const Page = styled.button`
+    width: 36px;
+    height: 36px;
+    background: ${(props => props.theme.primary)};
+    color: ${(props => props.theme.textColor)};
+    border: 1px solid ${(props => props.theme.borderColor)};
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 4px;
+
+    transition: .4s ease;
+    &:hover {
+        background: ${(props => props.theme.background)};
+    }
+`
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPrevPage: () => void;
+    onNextPage: () => void;
+}
+
+const Pagination = ({currentPage, totalPages, onPrevPage, onNextPage}: PaginationProps) => {
+    return (
+        <PaginateWrapper>
+            <Page
+                onClick={onPrevPage}
+                disabled={currentPage === 1}
+            >
+                <IconComponent
+                    width="20"
+                    height="20"
+                    name={buttonNames[17]}
+                />
+            </Page>
+
+            <Page
+                onClick={onNextPage}
+                disabled={currentPage === totalPages}
+            >
+                <IconComponent
+                    width="20"
+                    height="20"
+                    name={buttonNames[6]}
+                />
+            </Page>
+        </PaginateWrapper>
+    );
+};
+
+export default Pagination;