mirador/src/components/CollapsibleSection.jsx

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

import { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import Typography from '@mui/material/Typography';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useTranslation } from 'react-i18next';

/**
 * CollapsableSection ~
 */
export function CollapsibleSection({ children, id, label }) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(true);

  const handleChange = useCallback(
    (_event, isExpanded) => {
      setOpen(isExpanded);
    },
    [setOpen],
  );

  return (
    <Accordion
      slotProps={{ heading: { component: 'h4' } }}
      id={id}
      elevation={0}
      expanded={open}
      onChange={handleChange}
      disableGutters
      square
      variant="compact"
    >
      <AccordionSummary
        id={`${id}-header`}
        aria-controls={`${id}-content`}
        aria-label={t(open ? 'collapseSection' : 'expandSection', { section: label })}
        expandIcon={<ExpandMoreIcon />}
      >
        <Typography variant="overline">{label}</Typography>
      </AccordionSummary>
      <AccordionDetails>{children}</AccordionDetails>
    </Accordion>
  );
}

CollapsibleSection.propTypes = {
  children: PropTypes.node.isRequired,

  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
};