Spaces:
Running
Running
| import React from "react"; | |
| // ─── SectionHeader ───────────────────────────────────── | |
| // Page headings use consistent typography, supporting text, and actions. | |
| interface SectionHeaderProps { | |
| /** Section title */ | |
| title: string; | |
| /** Optional section description / subtitle */ | |
| description?: React.ReactNode; | |
| /** Optional action element (button, link, etc.) */ | |
| action?: React.ReactNode; | |
| /** Additional CSS class */ | |
| className?: string; | |
| /** Additional inline styles */ | |
| style?: React.CSSProperties; | |
| } | |
| export function SectionHeader({ | |
| title, | |
| description, | |
| action, | |
| className = "", | |
| style, | |
| }: SectionHeaderProps) { | |
| return ( | |
| <div | |
| className={className} | |
| style={{ | |
| display: "flex", | |
| alignItems: description ? "flex-start" : "center", | |
| justifyContent: "space-between", | |
| marginBottom: "var(--space-4)", | |
| ...style, | |
| }} | |
| > | |
| <div> | |
| <h2 className="section-title" style={{ margin: 0 }}> | |
| {title} | |
| </h2> | |
| {description && ( | |
| <p | |
| style={{ | |
| fontSize: "var(--text-sm)", | |
| color: "var(--text-secondary)", | |
| margin: "var(--space-1) 0 0", | |
| lineHeight: 1.5, | |
| }} | |
| > | |
| {description} | |
| </p> | |
| )} | |
| </div> | |
| {action && <div>{action}</div>} | |
| </div> | |
| ); | |
| } | |