mirador/src/components/SelectCollection.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 } from 'react';
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import ListSharpIcon from '@mui/icons-material/ListSharp';
import { useTranslation } from 'react-i18next';

/**
 *
 */
export function SelectCollection({ collectionPath = [], manifestId = null, showCollectionDialog, windowId = null }) {
  const { t } = useTranslation();
  const openCollectionDialog = useCallback(() => {
    showCollectionDialog(manifestId, collectionPath.slice(0, -1), windowId);
  }, [collectionPath, manifestId, showCollectionDialog, windowId]);

  return (
    <Grid container sx={{ alignContent: 'center', justifyContent: 'center', width: '100%' }}>
      <Stack>
        <Typography variant="h4" component="p" sx={{ mb: 2, textAlign: 'center' }}>
          <em>{t('noItemSelected')}</em>
        </Typography>
        <Button
          aria-label="show collection"
          color="primary"
          variant="contained"
          onClick={openCollectionDialog}
          startIcon={<ListSharpIcon />}
        >
          {t('showCollection')}
        </Button>
      </Stack>
    </Grid>
  );
}

SelectCollection.propTypes = {
  collectionPath: PropTypes.arrayOf(PropTypes.string),
  manifestId: PropTypes.string,
  showCollectionDialog: PropTypes.func.isRequired,
  windowId: PropTypes.string,
};