Add pagination components and update some other components

2026-09-23 04:19:48 +00:00 · 2023-11-29 14:31:06 +07:00
parent f5ed5d937a
commit d843667b01
8 changed files with 163 additions and 13 deletions
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+interface IPaginationBtn {
+  disabled: boolean;
+}
+
+const StyledPagination = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--fs-sm-x);
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  gap: 30px;
+`;
+
+const PaginationBtn = styled.button<IPaginationBtn>`
+  background-color: var(--secondary-btn-color);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  padding: 5px 10px;
+
+  transition: all 0.3s;
+
+  & svg {
+    height: 20px;
+    width: 20px;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--primary-color);
+    color: var(--light-text);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export { StyledPagination, PaginationBtn, Buttons };