feat: add new component - navigation header

components/ui/headers/header.tsx

@@ -12,7 +12,7 @@ export const Header: React.FC<HeaderProps> = ({ title, icon }) => {
     <>
       <header className="flex items-center gap-3 py-4">
         <Icon className="text-default-500" height={40} icon={icon} width={40} />
-        <h1 className="text-2xl font-bold text-default-700">{title}</h1>
+        <h1 className="text-2xl font-light text-default-700">{title}</h1>
       </header>
       <Divider className="mb-4" />
     </>

components/ui/headers/navigation-header.tsx

@@ -0,0 +1,34 @@
+import { Icon } from "@iconify/react";
+import { Divider } from "@nextui-org/react";
+import Link from "next/link";
+import React from "react";
+
+interface NavigationHeaderProps {
+  title: string;
+  icon: string;
+  href?: string;
+}
+
+export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
+  title,
+  icon,
+  href,
+}) => {
+  return (
+    <>
+      <header className="flex items-center gap-3 border-b border-gray-200 px-6 py-4 dark:border-gray-800">
+        <Link
+          className="mr-3 flex h-[2.625rem] w-[2.625rem] items-center justify-center rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700"
+          href={href || ""}
+        >
+          <Icon
+            icon={icon}
+            className="h-5 w-5 text-gray-600 dark:text-gray-400"
+          />
+        </Link>
+        <Divider orientation="vertical" className="h-6" />
+        <h1 className="text-xl font-light text-default-700">{title}</h1>
+      </header>
+    </>
+  );
+};

components/ui/index.ts

@@ -4,7 +4,8 @@ export * from "./alert-dialog/AlertDialog";
 export * from "./chart/Chart";
 export * from "./dialog/dialog";
 export * from "./dropdown/Dropdown";
-export * from "./header/Header";
+export * from "./headers/header";
+export * from "./headers/navigation-header";
 export * from "./label/Label";
 export * from "./select/Select";
 export * from "./sidebar";