49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { Separator } from "@/components/ui/separator"
|
|
import { SidebarTrigger } from "@/components/ui/sidebar"
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb"
|
|
|
|
interface Crumb {
|
|
label: string
|
|
href?: string
|
|
}
|
|
|
|
interface PageHeaderProps {
|
|
crumbs: Crumb[]
|
|
actions?: React.ReactNode
|
|
}
|
|
|
|
export function PageHeader({ crumbs, actions }: PageHeaderProps) {
|
|
return (
|
|
<header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<SidebarTrigger className="-ml-1" />
|
|
<Separator orientation="vertical" className="h-4" />
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
{crumbs.map((crumb, i) => (
|
|
<span key={i} className="flex items-center gap-1.5">
|
|
{i > 0 && <BreadcrumbSeparator />}
|
|
<BreadcrumbItem>
|
|
{i < crumbs.length - 1 && crumb.href ? (
|
|
<BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
|
|
) : i < crumbs.length - 1 ? (
|
|
<span className="text-muted-foreground text-sm">{crumb.label}</span>
|
|
) : (
|
|
<BreadcrumbPage>{crumb.label}</BreadcrumbPage>
|
|
)}
|
|
</BreadcrumbItem>
|
|
</span>
|
|
))}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
{actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
|
|
</header>
|
|
)
|
|
}
|