28 lines
666 B
TypeScript
28 lines
666 B
TypeScript
|
import React from "react";
|
||
|
|
import { t } from "../i18n";
|
||
|
|
|
||
|
|
interface SectionProps extends React.HTMLProps<HTMLElement> {
|
||
|
|
heading: string;
|
||
|
|
children: React.ReactNode | ((header: React.ReactNode) => React.ReactNode);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Section({ heading, children, ...props }: SectionProps) {
|
||
|
|
const header = (
|
||
|
|
<h2 className="visually-hidden" id={`${heading}-title`}>
|
||
|
|
{t(`headings.${heading}`)}
|
||
|
|
</h2>
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<section {...props} aria-labelledby={`${heading}-title`}>
|
||
|
|
{typeof children === "function" ? (
|
||
|
|
children(header)
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{header}
|
||
|
|
{children}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|