feat: add pagination music

components/ui.tsx

@@ -8,7 +8,7 @@ import {
   type TextareaHTMLAttributes,
   useEffect,
 } from "react";
-import { cn } from "@/lib/utils";
+import { cn, toFa } from "@/lib/utils";
 import { CloseIcon, SpinnerIcon } from "./icons";
 
 /* ------------------------------- Button -------------------------------- */
@@ -192,6 +192,44 @@ export function Badge({
   );
 }
 
+export function Pagination({
+  page,
+  lastPage,
+  total,
+  onChange,
+}: {
+  page: number;
+  lastPage: number;
+  total?: number;
+  onChange: (p: number) => void;
+}) {
+  if (lastPage <= 1) return null;
+  return (
+    <div className="mt-4 flex items-center justify-between gap-3 text-sm">
+      <span className="text-muted">
+        {total != null && `${toFa(total)} مورد · `}
+        صفحه {toFa(page)} از {toFa(lastPage)}
+      </span>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="secondary"
+          onClick={() => onChange(page - 1)}
+          disabled={page <= 1}
+        >
+          قبلی
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => onChange(page + 1)}
+          disabled={page >= lastPage}
+        >
+          بعدی
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 export function EmptyState({
   title,
   message,