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