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

app/components/icons/chevron-double.tsx

@@ -0,0 +1,28 @@
+import type { JSX, SVGProps } from 'react'
+
+/**
+ * Note: `ChevronDoubleIcon` default mengarah ke kiri.
+ * Gunakan class `rotate-xx` untuk mengubah arah ikon.
+ */
+export const ChevronDoubleIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={20}
+      height={20}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={properties.className}
+      {...properties}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.512 4.427l-2.984 3.58 2.877 3.575a.667.667 0 01-1.04.836l-3.218-4a.667.667 0 01.007-.844l3.334-4a.667.667 0 011.024.853zm-5.69-.853a.667.667 0 011.023.853l-2.984 3.58 2.877 3.575a.667.667 0 01-1.039.836l-3.218-4a.666.666 0 01.007-.844l3.333-4z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/icons/chevron.tsx

@@ -1,6 +1,9 @@
 import type { JSX, SVGProps } from 'react'
-
-export const ChevronDownIcon = (
+/**
+ * Note: `ChevronIcon` default mengarah ke bawah.
+ * Gunakan class `rotate-xx` untuk mengubah arah ikon.
+ */
+export const ChevronIcon = (
   properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) => {
   return (
@@ -10,6 +13,7 @@ export const ChevronDownIcon = (
       viewBox="0 0 21 21"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={properties.className}
       {...properties}
     >
       <path

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>
+  )
+}