From 6b01068901cd3626b7c9be924a7374d200958d32 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:15:24 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20NavItem=20co?=
 =?UTF-8?q?mponent=20=F0=9F=93=A6=20Optimize=20code=20structure=20and=20st?=
 =?UTF-8?q?yling=20=F0=9F=9A=80=20Improve=20button=20styles=20and=20readab?=
 =?UTF-8?q?ility=20=F0=9F=94=A7=20Add=20optional=20onClick=20handler=20?=
 =?UTF-8?q?=F0=9F=91=8C=20Enhance=20code=20quality=20and=20maintainability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/shared/NavItem.tsx b/src/shared/NavItem.tsx
new file mode 100644
index 0000000..7b586b0
--- /dev/null
+++ b/src/shared/NavItem.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import React, { FC, ReactNode } from "react";
+import twFocusClass from "@/utils/twFocusClass";
+
+export interface NavItemProps {
+  className?: string;
+  radius?: string;
+  onClick?: () => void;
+  isActive?: boolean;
+  renderX?: ReactNode;
+  children?: ReactNode;
+}
+
+const NavItem: FC<NavItemProps> = ({
+  className = "px-5 py-2.5 text-sm sm:text-base sm:px-6 sm:py-3 capitalize",
+  radius = "rounded-full",
+  children,
+  onClick = () => {},
+  isActive = false,
+  renderX,
+}) => {
+  return (
+    <li className="nc-NavItem relative" data-nc-id="NavItem">
+      {renderX && renderX}
+      <button
+        className={`block !leading-none font-medium whitespace-nowrap ${className} ${radius} ${
+          isActive
+            ? "bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900"
+            : "text-neutral-500 dark:text-neutral-400 dark:hover:text-neutral-100 hover:text-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800"
+        } ${twFocusClass()}`}
+        onClick={() => {
+          onClick && onClick();
+        }}
+      >
+        {children}
+      </button>
+    </li>
+  );
+};
+
+export default NavItem;