From 8ed9f2d258710b2cf2f444582407b566ac3e1577 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:05:50 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Implement=20Pagination=20compone?=
 =?UTF-8?q?nt=20=F0=9F=93=A6=20Added=20Pagination=20component=20for=20hand?=
 =?UTF-8?q?ling=20custom=20links.=20=F0=9F=8E=A8=20Improved=20styling=20an?=
 =?UTF-8?q?d=20structure.=20=F0=9F=90=9B=20Fixed=20an=20issue=20with=20act?=
 =?UTF-8?q?ive=20pagination.=20=F0=9F=9A=80=20Ready=20to=20test=20and=20in?=
 =?UTF-8?q?tegrate!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/shared/Pagination.tsx b/src/shared/Pagination.tsx
new file mode 100644
index 0000000..4c8f9a3
--- /dev/null
+++ b/src/shared/Pagination.tsx
@@ -0,0 +1,64 @@
+import { CustomLink } from "@/data/types";
+import React, { FC } from "react";
+import twFocusClass from "@/utils/twFocusClass";
+import Link from "next/link";
+import { Route } from "@/routers/types";
+
+const DEMO_PAGINATION: CustomLink[] = [
+  {
+    label: "1",
+    href: "#",
+  },
+  {
+    label: "2",
+    href: "#",
+  },
+  {
+    label: "3",
+    href: "#",
+  },
+  {
+    label: "4",
+    href: "#",
+  },
+];
+
+export interface PaginationProps {
+  className?: string;
+}
+
+const Pagination: FC<PaginationProps> = ({ className = "" }) => {
+  const renderItem = (pag: CustomLink, index: number) => {
+    if (index === 0) {
+      // RETURN ACTIVE PAGINATION
+      return (
+        <span
+          key={index}
+          className={`inline-flex w-11 h-11 items-center justify-center rounded-full bg-primary-6000 text-white ${twFocusClass()}`}
+        >
+          {pag.label}
+        </span>
+      );
+    }
+    // RETURN UNACTIVE PAGINATION
+    return (
+      <Link
+        key={index}
+        className={`inline-flex w-11 h-11 items-center justify-center rounded-full bg-white hover:bg-neutral-100 border border-neutral-200 text-neutral-6000 dark:text-neutral-400 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:border-neutral-700 ${twFocusClass()}`}
+        href={pag.href as Route}
+      >
+        {pag.label}
+      </Link>
+    );
+  };
+
+  return (
+    <nav
+      className={`nc-Pagination inline-flex space-x-1 text-base font-medium ${className}`}
+    >
+      {DEMO_PAGINATION.map(renderItem)}
+    </nav>
+  );
+};
+
+export default Pagination;