feat(client-projects): enhance pagination controls and improve skelet…

…on loading UI Updated the ClientProjects component to improve pagination controls with better styling and responsiveness. Adjusted the ProjectsSkeleton to utilize the new RepositoryCardSkeleton for a more consistent loading experience. Enhanced the layout of the RepositoryCardSkeleton for improved visual structure and accessibility.
kWAYTV · Dec 12, 2024 · d02eef0 · d02eef0
1 parent d42fc22
commit d02eef0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/src/components/core/projects/client-projects.tsx b/src/components/core/projects/client-projects.tsx
@@ -64,11 +64,13 @@ export function ClientProjects() {
       {totalRepos > itemsPerPage && (
         <>
           <Separator className='my-2' />
-          <div className='flex items-center justify-between'>
+          <div className='flex items-center justify-between px-1'>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
                   variant='ghost'
+                  size='sm'
+                  className='h-8 w-8 p-0'
                   onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                   disabled={currentPage === 1}
                 >
@@ -79,13 +81,15 @@ export function ClientProjects() {
             </Tooltip>
 
             <span className='text-sm text-muted-foreground'>
-              Page {currentPage} of {totalPages}
+              {currentPage} / {totalPages}
             </span>
 
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
                   variant='ghost'
+                  size='sm'
+                  className='h-8 w-8 p-0'
                   onClick={() =>
                     setCurrentPage(p => Math.min(totalPages, p + 1))
                   }

diff --git a/src/components/core/projects/projects-skeleton.tsx b/src/components/core/projects/projects-skeleton.tsx
@@ -1,23 +1,16 @@
+import { RepositoryCardSkeleton } from '@/components/core/projects/repository-card-skeleton';
+import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
 
 export function ProjectsSkeleton() {
   return (
     <div className='space-y-4'>
       <Skeleton className='h-9 w-full' />
-      <div className='mt-8 space-y-4'>
+      <div className='space-y-1'>
         {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className='flex flex-col space-y-2'>
-            <div className='flex w-full flex-row space-x-2'>
-              <Skeleton className='h-5 w-[100px]' />
-              <div className='flex flex-1 justify-between'>
-                <Skeleton className='h-5 w-[200px]' />
-                <div className='flex space-x-4'>
-                  <Skeleton className='h-5 w-16' />
-                  <Skeleton className='h-5 w-16' />
-                </div>
-              </div>
-            </div>
-            <Skeleton className='ml-[100px] h-4 w-[60%] md:ml-[116px]' />
+          <div key={i}>
+            <RepositoryCardSkeleton />
+            {i < 4 && <Separator className='my-1' />}
           </div>
         ))}
       </div>

diff --git a/src/components/core/projects/repository-card-skeleton.tsx b/src/components/core/projects/repository-card-skeleton.tsx
@@ -2,17 +2,34 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export function RepositoryCardSkeleton() {
   return (
-    <div className='mb-4 flex flex-col space-y-1 rounded-md p-2'>
-      <div className='flex w-full flex-row space-x-0 md:space-x-2'>
-        <div className='w-[100px]'>
-          <Skeleton className='h-5 w-[80px]' />
+    <div className='group rounded-md p-2'>
+      <div className='flex w-full flex-col space-y-2'>
+        <div className='flex flex-col space-y-2 sm:flex-row sm:items-start sm:justify-between'>
+          <div className='flex items-center gap-2'>
+            <Skeleton className='h-5 w-[150px]' />
+            <Skeleton className='h-4 w-4' />
+          </div>
+          <div className='flex items-center gap-4'>
+            <Skeleton className='h-4 w-24 sm:inline' />
+            <div className='flex items-center gap-2'>
+              <div className='flex items-center gap-1'>
+                <Skeleton className='h-4 w-4' />
+                <Skeleton className='h-4 w-6' />
+              </div>
+              <div className='flex items-center gap-1'>
+                <Skeleton className='h-4 w-4' />
+                <Skeleton className='h-4 w-6' />
+              </div>
+            </div>
+          </div>
         </div>
-        <div className='flex flex-1 justify-between'>
-          <Skeleton className='h-5 w-[200px]' />
-          <div className='flex items-center space-x-4'>
-            <Skeleton className='h-5 w-16' />
-            <Skeleton className='h-5 w-16' />
+
+        <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-x-4'>
+          <div className='flex items-center gap-2'>
+            <Skeleton className='h-5 w-20' />
+            <Skeleton className='h-4 w-24 sm:hidden' />
           </div>
+          <Skeleton className='h-4 w-full max-w-[500px]' />
         </div>
       </div>
     </div>