32 lines
1010 B
JavaScript
32 lines
1010 B
JavaScript
/**
|
|
* Abschnitt mit optionalem Kopf (Titel, Beschreibung, Aktionen) und unterem Rand zur optischen Trennung.
|
|
*/
|
|
export default function DashboardSection({
|
|
title,
|
|
description,
|
|
headerRight,
|
|
children,
|
|
className = '',
|
|
bodyClassName = ''
|
|
}) {
|
|
const showHeader = title || description || headerRight
|
|
return (
|
|
<section className={`dashboard-section ${className}`.trim()}>
|
|
{showHeader && (
|
|
<header className="dashboard-section__header">
|
|
<div className="dashboard-section__headline">
|
|
{title ? <h2 className="dashboard-section__title">{title}</h2> : null}
|
|
{description ? (
|
|
<p className="dashboard-section__description">{description}</p>
|
|
) : null}
|
|
</div>
|
|
{headerRight ? (
|
|
<div className="dashboard-section__actions">{headerRight}</div>
|
|
) : null}
|
|
</header>
|
|
)}
|
|
<div className={`dashboard-section__body ${bodyClassName}`.trim()}>{children}</div>
|
|
</section>
|
|
)
|
|
}
|