mirador/src/components/CanvasInfo.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 { useId } from 'react';
import PropTypes from 'prop-types';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import CollapsibleSection from '../containers/CollapsibleSection';
import SanitizedHtml from '../containers/SanitizedHtml';
import LabelValueMetadata from '../containers/LabelValueMetadata';
import { PluginHook } from './PluginHook';

/**
 * CanvasInfo
 */
export function CanvasInfo({ canvasDescription = null, canvasLabel = null, canvasMetadata = [], index = 1, totalSize = 1 }) {
  const { t } = useTranslation();
  const id = useId();
  const titleId = useId();
  // eslint-disable-next-line prefer-rest-params
  const pluginProps = arguments[0];

  return (
    <CollapsibleSection id={id} label={t('currentItem', { context: `${index + 1}/${totalSize}` })}>
      {canvasLabel && (
        <Typography aria-labelledby={`${id} ${titleId}`} id={titleId} variant="h4" component="h5">
          {canvasLabel}
        </Typography>
      )}

      {canvasDescription && (
        <Typography variant="body1">
          <SanitizedHtml htmlString={canvasDescription} ruleSet="iiif" />
        </Typography>
      )}

      {canvasMetadata && canvasMetadata.length > 0 && <LabelValueMetadata labelValuePairs={canvasMetadata} />}
      <PluginHook targetName="CanvasInfo" {...pluginProps} />
    </CollapsibleSection>
  );
}

CanvasInfo.propTypes = {
  canvasDescription: PropTypes.string,
  canvasLabel: PropTypes.string,
  canvasMetadata: PropTypes.array,
  index: PropTypes.number,
  totalSize: PropTypes.number,
};