41 lines
965 B
TypeScript
41 lines
965 B
TypeScript
import type React from "react";
|
|
|
|
interface SectionProps {
|
|
id?: string;
|
|
eyebrow?: string;
|
|
title: string;
|
|
description?: string;
|
|
dark?: boolean;
|
|
aside?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Section = ({
|
|
id,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
dark,
|
|
aside,
|
|
children,
|
|
}: SectionProps) => {
|
|
const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
|
|
return (
|
|
<section id={id} className={baseClass}>
|
|
<div className="ds-section-shell">
|
|
<div className="ds-section-header">
|
|
<div className="ds-section-meta">
|
|
{eyebrow && <p className="ds-eyebrow">{eyebrow}</p>}
|
|
<h2 className="ds-section-title">{title}</h2>
|
|
{description && (
|
|
<p className="ds-section-description">{description}</p>
|
|
)}
|
|
</div>
|
|
{aside && <aside>{aside}</aside>}
|
|
</div>
|
|
<div>{children}</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|