feat: all project setup

components/layout/dashboard-header.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+// ============================================================================
+// Dashboard Header
+// ============================================================================
+
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { ThemeToggle } from "@/components/theme-toggle";
+import React from "react";
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface DashboardHeaderProps {
+  breadcrumbs?: BreadcrumbItem[];
+}
+
+export const DashboardHeader: React.FC<DashboardHeaderProps> = ({
+  breadcrumbs = [],
+}) => {
+  return (
+    <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+      <SidebarTrigger className="-ml-1" />
+      <Separator orientation="vertical" className="mr-2 h-4" />
+      {breadcrumbs.length > 0 && (
+        <Breadcrumb>
+          <BreadcrumbList>
+            {breadcrumbs.map((item, index) => (
+              <React.Fragment key={index}>
+                {index > 0 && <BreadcrumbSeparator />}
+                <BreadcrumbItem>
+                  {item.href ? (
+                    <BreadcrumbLink href={item.href}>
+                      {item.label}
+                    </BreadcrumbLink>
+                  ) : (
+                    <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                  )}
+                </BreadcrumbItem>
+              </React.Fragment>
+            ))}
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
+      <div className="ml-auto">
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+};