Import source: src/components/common/page-header

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:10:38 +03:30
parent 6be491a0a3
commit a5bcf4b1e2
1 changed files with 57 additions and 0 deletions
@@ -0,0 +1,57 @@
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function PageHeader({
+  title,
+  description,
+  breadcrumbs,
+  actions,
+}: {
+  title: string;
+  description: string;
+  breadcrumbs: Array<{ label: string; href?: string }>;
+  actions?: string[];
+}) {
+  return (
+    <div className="mb-5 space-y-3">
+      <nav
+        aria-label="Breadcrumb"
+        className="flex flex-wrap items-center gap-1 text-xs text-muted-foreground"
+      >
+        {breadcrumbs.map((crumb, index) => (
+          <span key={`${crumb.label}-${index}`} className="inline-flex items-center gap-1">
+            {index > 0 ? <ChevronRight className="h-3 w-3 opacity-60" /> : null}
+            {crumb.href ? (
+              <Link
+                href={crumb.href}
+                className="rounded-sm px-1 py-0.5 transition-colors hover:bg-muted/70 hover:text-foreground"
+              >
+                {crumb.label}
+              </Link>
+            ) : (
+              <span className="px-1 py-0.5">{crumb.label}</span>
+            )}
+          </span>
+        ))}
+      </nav>
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+        <div>
+          <h1 className="text-gradient font-display text-2xl font-semibold tracking-tight sm:text-3xl">
+            {title}
+          </h1>
+          <p className="mt-1.5 max-w-3xl text-sm text-muted-foreground">{description}</p>
+        </div>
+        {actions?.length ? (
+          <div className="flex flex-wrap items-center gap-2">
+            {actions.map((action, index) => (
+              <Button key={action} variant={index === 0 ? "default" : "outline"} size="sm">
+                {action}
+              </Button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}