Build the Salar Store storefront and connect products, blogs, and home specials to the Meshkee API.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/Pagination.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+type Props = {
+  page: number;
+  pageSize: number;
+  total: number;
+  makeHref: (page: number) => string;
+};
+
+export function Pagination({ page, pageSize, total, makeHref }: Props) {
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  if (pages <= 1) return null;
+
+  const prev = page > 1 ? page - 1 : null;
+  const next = page < pages ? page + 1 : null;
+
+  return (
+    <div className="mt-10 flex items-center justify-center gap-3 text-sm">
+      {prev ? (
+        <Link href={makeHref(prev)} className="rounded-lg border border-black/10 px-4 py-2 hover:border-brand hover:text-brand">
+          قبلی
+        </Link>
+      ) : (
+        <span className="rounded-lg border border-black/5 px-4 py-2 text-zinc-300">قبلی</span>
+      )}
+      <span className="text-zinc-500">
+        صفحه {page} از {pages}
+      </span>
+      {next ? (
+        <Link href={makeHref(next)} className="rounded-lg border border-black/10 px-4 py-2 hover:border-brand hover:text-brand">
+          بعدی
+        </Link>
+      ) : (
+        <span className="rounded-lg border border-black/5 px-4 py-2 text-zinc-300">بعدی</span>
+      )}
+    </div>
+  );
+}