feat: add ChevronIcon and ChevronDoubleIcon components, and implement pagination in UsersPage

app/components/ui/pagination.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { ChevronIcon } from '~/components/icons/chevron'
+import { ChevronDoubleIcon } from '~/components/icons/chevron-double'
+
+interface PaginationProperties {
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+export const Pagination: React.FC<PaginationProperties> = ({
+  currentPage = 1,
+  totalPages,
+  onPageChange,
+}) => {
+  const renderPageNumbers = () => {
+    const pages = []
+    for (let index = 1; index <= totalPages; index++) {
+      pages.push(
+        <button
+          key={index}
+          onClick={() => onPageChange(index)}
+          className={`rounded-lg px-3 py-1 ${
+            currentPage === index ? 'bg-[#2E2F7C] text-white' : 'text-gray-500'
+          }`}
+        >
+          {index}
+        </button>,
+      )
+    }
+    return pages
+  }
+
+  return (
+    <div className="flex items-center justify-center space-x-2 text-[#2E2F7C]">
+      <button
+        onClick={() => onPageChange(1)}
+        disabled={currentPage === 1}
+      >
+        <ChevronDoubleIcon />
+      </button>
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        <ChevronIcon className="rotate-90" />
+      </button>
+
+      {renderPageNumbers()}
+
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        <ChevronIcon className="rotate-270" />
+      </button>
+      <button
+        onClick={() => onPageChange(totalPages)}
+        disabled={currentPage === totalPages}
+      >
+        <ChevronDoubleIcon className="rotate-180" />
+      </button>
+    </div>
+  )
+}