28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
actions,
|
|
}: {
|
|
title: ReactNode
|
|
description?: ReactNode
|
|
actions?: ReactNode
|
|
}) {
|
|
return (
|
|
// Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
|
|
// tighter bottom rule. Toolbar/actions sit inline on the right.
|
|
<div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
|
|
<div className="flex min-w-0 items-start gap-2.5">
|
|
{/* Brand accent bar — nhận diện #1F7DC1 per-page (mirror fe-user S58) */}
|
|
<span aria-hidden className="mt-0.5 h-4 w-1 shrink-0 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
|
|
<div className="min-w-0">
|
|
<h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
|
|
{description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
|
|
</div>
|
|
</div>
|
|
{actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
|
|
</div>
|
|
)
|
|
}
|