pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add pagination component

Browse source
This commit is contained in:
jeffvli 2022-12-26 00:49:11 -08:00
parent be3cc74e5d
commit d1507604f2
2 changed files with 68 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/renderer/components/index.ts
View file

@ -1,30 +1,31 @@
export * from './tooltip';
export * from './audio-player';
export * from './text';
export * from './button';
export * from './virtual-grid';
export * from './modal';
export * from './input';
export * from './segmented-control';
export * from './dropdown-menu';
export * from './toast';
export * from './switch';
export * from './popover';
export * from './select';
export * from './date-picker';
export * from './scroll-area';
export * from './paper';
export * from './tabs';
export * from './slider';
export * from './accordion'; export * from './accordion';
export * from './dropzone'; export * from './audio-player';
export * from './spinner';
export * from './virtual-table';
export * from './skeleton';
export * from './page-header';
export * from './text-title';
export * from './grid-carousel';
export * from './card';
export * from './feature-carousel';
export * from './badge'; export * from './badge';
export * from './button';
export * from './card';
export * from './date-picker';
export * from './dropdown-menu';
export * from './dropzone';
export * from './feature-carousel';
export * from './grid-carousel';
export * from './input';
export * from './modal';
export * from './page-header';
export * from './pagination';
export * from './paper';
export * from './popover';
export * from './scroll-area';
export * from './search-input'; export * from './search-input';
export * from './segmented-control';
export * from './select';
export * from './skeleton';
export * from './slider';
export * from './spinner';
export * from './switch';
export * from './tabs';
export * from './text';
export * from './text-title';
export * from './toast';
export * from './tooltip';
export * from './virtual-grid';
export * from './virtual-table';

40
src/renderer/components/pagination/index.tsx Normal file
View file

@ -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}
/>
);
};