mirador/src/components/Branding.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 PropTypes from 'prop-types';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import MiradorIcon from './icons/MiradorIcon';

/**
 * Display a branding icon
 */
export function Branding({ variant = 'default', ...ContainerProps }) {
  const { t } = useTranslation();
  return (
    <Stack alignItems="center" {...ContainerProps}>
      {variant === 'wide' && (
        <div>
          <Typography align="center" component="p" variant="h3">
            {t('mirador')}
          </Typography>
        </div>
      )}
      <Typography align="center">
        <IconButton component="a" href="https://projectmirador.org" target="_blank" rel="noopener" size="large">
          <MiradorIcon aria-label={t('aboutMirador')} titleAccess={t('aboutMirador')} fontSize="large" />
        </IconButton>
      </Typography>
    </Stack>
  );
}

Branding.propTypes = {
  variant: PropTypes.oneOf(['default', 'wide']),
};