15d79f8fee
* chore: upgrade to React 18 * better type * use React.FC to fix type Co-authored-by: dwelle <luzar.david@gmail.com>
29 lines
733 B
TypeScript
29 lines
733 B
TypeScript
import React from "react";
|
|
import { t } from "../i18n";
|
|
import { useExcalidrawContainer } from "./App";
|
|
|
|
export const Section: React.FC<{
|
|
heading: string;
|
|
children?: React.ReactNode | ((heading: React.ReactNode) => React.ReactNode);
|
|
className?: string;
|
|
}> = ({ heading, children, ...props }) => {
|
|
const { id } = useExcalidrawContainer();
|
|
const header = (
|
|
<h2 className="visually-hidden" id={`${id}-${heading}-title`}>
|
|
{t(`headings.${heading}`)}
|
|
</h2>
|
|
);
|
|
return (
|
|
<section {...props} aria-labelledby={`${id}-${heading}-title`}>
|
|
{typeof children === "function" ? (
|
|
children(header)
|
|
) : (
|
|
<>
|
|
{header}
|
|
{children}
|
|
</>
|
|
)}
|
|
</section>
|
|
);
|
|
};
|