Add pagination component

2026-05-14 20:40:21 +02:00 · 2022-12-26 00:49:11 -08:00
parent be3cc74e5d
commit d1507604f2
2 changed files with 68 additions and 27 deletions
@@ -0,0 +1,40 @@
+import { Pagination as MantinePagination, PaginationProps } from '@mantine/core';
+import styled from 'styled-components';
+
+const StyledPagination = styled(MantinePagination)`
+  & .mantine-Pagination-item {
+    color: var(--btn-default-fg);
+    background-color: var(--btn-default-bg);
+    border: none;
+    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+
+    &:hover {
+      color: var(--btn-default-fg-hover);
+      background-color: var(--btn-default-bg-hover);
+    }
+
+    &[data-active] {
+      color: var(--btn-primary-fg);
+      background-color: var(--btn-primary-bg);
+    }
+
+    &:hover &[data-active] {
+      color: var(--btn-primary-fg-hover);
+      background-color: var(--btn-primary-bg-hover);
+    }
+
+    &[data-dots] {
+      background-color: transparent;
+    }
+  }
+`;
+
+export const Pagination = ({ ...props }: PaginationProps) => {
+  return (
+    <StyledPagination
+      radius="xl"
+      size="md"
+      {...props}
+    />
+  );
+};