feishin/src/renderer/components/pagination/index.tsx

import {
  Pagination as MantinePagination,
  PaginationProps as MantinePaginationProps,
} from '@mantine/core';
import styled from 'styled-components';

const StyledPagination = styled(MantinePagination)<PaginationProps>`
  & .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] {
      display: ${({ $hideDividers }) => ($hideDividers ? 'none' : 'block')};
      background-color: transparent;
    }
  }
`;

interface PaginationProps extends MantinePaginationProps {
  $hideDividers?: boolean;
}

export const Pagination = ({ $hideDividers, ...props }: PaginationProps) => {
  return (
    <StyledPagination
      $hideDividers={$hideDividers}
      radius="xl"
      size="md"
      {...props}
    />
  );
};