From c2ba12539180a1c1f505273a5b93469be28b8f52 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:06:53 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A6=20Added=20NextPrev=20component=20?=
 =?UTF-8?q?=F0=9F=9A=80=20Implemented=20a=20reusable=20NextPrev=20componen?=
 =?UTF-8?q?t=20=F0=9F=8E=A8=20Improved=20button=20styling=20=F0=9F=90=9B?=
 =?UTF-8?q?=20Fixed=20potential=20bugs=20=F0=9F=93=9D=20Updated=20document?=
 =?UTF-8?q?ation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/NextPrev.tsx | 57 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/shared/NextPrev.tsx

diff --git a/src/shared/NextPrev.tsx b/src/shared/NextPrev.tsx
new file mode 100644
index 0000000..c05d644
--- /dev/null
+++ b/src/shared/NextPrev.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React, { FC } from "react";
+import twFocusClass from "@/utils/twFocusClass";
+
+export interface NextPrevProps {
+  className?: string;
+  currentPage?: number;
+  totalPage?: number;
+  btnClassName?: string;
+  onClickNext?: () => void;
+  onClickPrev?: () => void;
+  onlyNext?: boolean;
+  onlyPrev?: boolean;
+}
+
+const NextPrev: FC<NextPrevProps> = ({
+  className = "",
+  onClickNext = () => {},
+  onClickPrev = () => {},
+  btnClassName = "w-10 h-10",
+  onlyNext = false,
+  onlyPrev = false,
+}) => {
+  return (
+    <div
+      className={`nc-NextPrev relative flex items-center text-neutral-900 dark:text-neutral-300 ${className}`}
+      data-nc-id="NextPrev"
+      data-glide-el="controls"
+    >
+      {!onlyNext && (
+        <button
+          className={`${btnClassName} ${
+            !onlyPrev ? "mr-[6px]" : ""
+          } bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-6000 dark:hover:border-neutral-500 rounded-full flex items-center justify-center hover:border-neutral-300 ${twFocusClass()}`}
+          onClick={onClickPrev}
+          title="Prev"
+          data-glide-dir="<"
+        >
+          <i className="las la-angle-left"></i>
+        </button>
+      )}
+      {!onlyPrev && (
+        <button
+          className={`${btnClassName} bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-6000 dark:hover:border-neutral-500 rounded-full flex items-center justify-center hover:border-neutral-300 ${twFocusClass()}`}
+          onClick={onClickNext}
+          title="Next"
+          data-glide-dir=">"
+        >
+          <i className="las la-angle-right"></i>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default NextPrev;