add compact mode to pagination component

xch-dev · Jan 26, 2025 · d7b9259 · d7b9259
1 parent 8c9a05f
commit d7b9259
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/components/NftCardList.tsx b/src/components/NftCardList.tsx
@@ -174,7 +174,7 @@ export function NftCardList({
 
   return (
     <div
-      className='grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-16 gap-2 md:gap-4 mt-6 mb-2'
+      className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-2 md:gap-4 mt-6 mb-2'
       role='grid'
       aria-label={t`NFT Gallery`}
     >

diff --git a/src/components/NftOptions.tsx b/src/components/NftOptions.tsx
@@ -129,6 +129,7 @@ export function NftOptions({
           onPageChange={(newPage) => setParams({ page: newPage })}
           onPageSizeChange={(newSize) => setParams({ pageSize: newSize, page: 1 })}
           pageSizeOptions={[24, 48, 72, 96]}
+          compact={true}
         />
 
         <div

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
@@ -20,6 +20,7 @@ type PaginationProps = {
   pageSize: number;
   onPageSizeChange: (pageSize: number) => void;
   pageSizeOptions?: number[];
+  compact?: boolean;
 };
 
 export const Pagination = ({
@@ -31,6 +32,7 @@ export const Pagination = ({
   pageSize,
   onPageSizeChange,
   pageSizeOptions = [8, 16, 32, 64],
+  compact = false,
 }: PaginationProps) => {
   const totalPages = total
     ? Math.max(1, Math.ceil(total / pageSize))
@@ -46,7 +48,7 @@ export const Pagination = ({
       aria-label={t`Pagination`}
       className='flex justify-between gap-2'
     >
-      <div className='flex items-center justify-start gap-3'>
+      <div className={`flex items-center justify-start ${compact ? 'gap-1 md:gap-3' : 'gap-3'}`}>
         <Button
           size='icon'
           variant='outline'
@@ -114,7 +116,7 @@ export const Pagination = ({
         </Button>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className={`${compact ? 'hidden md:flex' : 'flex'} items-center gap-2`}>
         <label 
           id="items-per-page-label" 
           className="sr-only"