Refactor code structure and remove redundant changes

src-old/components/common/Pagination.tsx

@@ -0,0 +1,87 @@
+import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  isLoading?: boolean;
+}
+
+export function Pagination({ currentPage, totalPages, onPageChange, isLoading }: PaginationProps) {
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const showPages = 5;
+    
+    if (totalPages <= showPages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) pages.push(i);
+        pages.push('...');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = totalPages - 3; i <= totalPages; i++) pages.push(i);
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) pages.push(i);
+        pages.push('...');
+        pages.push(totalPages);
+      }
+    }
+    
+    return pages;
+  };
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <div className="flex items-center justify-center gap-2 mt-8">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1 || isLoading}
+      >
+        <ChevronLeft className="w-4 h-4" />
+        Previous
+      </Button>
+
+      <div className="flex items-center gap-1">
+        {getPageNumbers().map((page, idx) => (
+          typeof page === 'number' ? (
+            <Button
+              key={idx}
+              variant={currentPage === page ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => onPageChange(page)}
+              disabled={isLoading}
+              className="min-w-[40px]"
+            >
+              {page}
+            </Button>
+          ) : (
+            <span key={idx} className="px-2 text-muted-foreground">
+              {page}
+            </span>
+          )
+        ))}
+      </div>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages || isLoading}
+      >
+        Next
+        <ChevronRight className="w-4 h-4" />
+      </Button>
+    </div>
+  );
+}