42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
interface PageHeaderProps {
|
|
title: string
|
|
description?: string
|
|
actions?: ReactNode
|
|
children?: ReactNode
|
|
}
|
|
|
|
export function PageHeader({ title, description, actions, children }: PageHeaderProps) {
|
|
return (
|
|
<div className="flex flex-col gap-6 border-b px-4 pb-6 pt-4 lg:px-6">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
|
{description ? (
|
|
<p className="mt-1 text-sm text-muted-foreground">{description}</p>
|
|
) : null}
|
|
</div>
|
|
{actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
PageHeader.Action = function PageHeaderAction({ children }: { children: ReactNode }) {
|
|
return <div className="flex items-center gap-2">{children}</div>
|
|
}
|
|
|
|
PageHeader.PrimaryButton = function PageHeaderPrimaryButton({
|
|
children,
|
|
...props
|
|
}: React.ComponentProps<typeof Button>) {
|
|
return (
|
|
<Button size="sm" {...props}>
|
|
{children}
|
|
</Button>
|
|
)
|
|
}
|