feat: 修改样式
This commit is contained in:
@@ -26,14 +26,14 @@ interface PaginationProps<TData> {
|
||||
|
||||
export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
|
||||
return (
|
||||
<div className='flex flex-wrap items-center justify-between gap-2'>
|
||||
<div className='text-muted-foreground flex-1 whitespace-nowrap text-center sm:text-left'>
|
||||
<div className='flex flex-wrap items-center justify-center gap-2'>
|
||||
<div className='whitespace-nowrap text-center text-[15px] text-[#666]'>
|
||||
{text?.textPageOf?.(table.getState().pagination.pageIndex + 1, table.getPageCount()) ||
|
||||
`Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
|
||||
</div>
|
||||
<div className='flex flex-grow items-center justify-center gap-2 sm:justify-end'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
|
||||
<div className='ml-[34px] flex items-center justify-center gap-3'>
|
||||
{/*<div className='flex items-center space-x-2'>
|
||||
<p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
|
||||
<Select
|
||||
value={`${table.getState().pagination.pageSize}`}
|
||||
onValueChange={(value) => {
|
||||
@@ -51,11 +51,11 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>*/}
|
||||
<Button
|
||||
variant='outline'
|
||||
size='icon'
|
||||
className='hidden lg:flex'
|
||||
className='h-[30px] w-[30px] rounded-full bg-[#EAEAEA] text-[#848484]'
|
||||
onClick={() => table.setPageIndex(0)}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
@@ -64,6 +64,7 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
className='h-[30px] w-[30px] rounded-full bg-[#EAEAEA] text-[#848484]'
|
||||
size='icon'
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
@@ -75,8 +76,8 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
|
||||
value={`${table.getState().pagination.pageIndex + 1}`}
|
||||
onValueChange={(value) => table.setPageIndex(Number(value) - 1)}
|
||||
>
|
||||
<SelectTrigger className='w-[70px]'>
|
||||
<SelectValue placeholder='Select page number' />
|
||||
<SelectTrigger className='h-[30px] w-[70px] rounded-full bg-[#EAEAEA] text-[#848484]'>
|
||||
<SelectValue placeholder='Select page number' className={''} />
|
||||
</SelectTrigger>
|
||||
<SelectContent className='w-12'>
|
||||
{Array.from({ length: table.getPageCount() }, (_, i) => (
|
||||
@@ -88,6 +89,7 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
|
||||
</Select>
|
||||
<Button
|
||||
variant='outline'
|
||||
className='h-[30px] w-[30px] rounded-full bg-[#EAEAEA] text-[#848484]'
|
||||
size='icon'
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
@@ -98,7 +100,7 @@ export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
|
||||
<Button
|
||||
variant='outline'
|
||||
size='icon'
|
||||
className='hidden lg:flex'
|
||||
className='h-[30px] w-[30px] rounded-full bg-[#EAEAEA] text-[#848484]'
|
||||
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
|
||||
@@ -171,7 +171,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn('relative overflow-x-auto', {
|
||||
className={cn('relative', {
|
||||
'rounded-xl border': data.length === 0,
|
||||
})}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user