packages/excalidraw/components/Section.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import React from "react";
import { t } from "../i18n";
import { useExcalidrawContainer } from "./App";

export const Section: React.FC<{
  heading: "canvasActions" | "selectedShapeActions" | "shapes";
  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>
  );
};