@eureca/eureca-ui/src/components/OpportunityHeader/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';

import { Typography, Box, useTheme } from '@material-ui/core';
import { Flex } from '../Flex';
import { Avatar } from '../Avatar';

import { media } from '../../theme';
import { colors } from '../../theme/colors';
import { shadows } from '../../theme';

import { useWindowSize } from '../../hooks/useWindowSizeSSR';

const HeaderContainer = styled(Flex)`
  border-radius: 4px 4px 0 0;
  overflow: hidden;

  ${media.mobile} {
    margin-left: -16px;
    margin-top: -32px;
    width: 100vw;
  }
`;

const HeaderImage = styled.div`
  ${({ image }) => css`
    width: 100%;
    height: 304px;
    background: url(${image});
    background-repeat: no-repeat;
    background-size: cover;

    ${media.mobile} {
      height: 240px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 53.13%, colors.color1 100%),
        url(${image});
    }
  `}
`;

const classes = {
  divider: {
    position: 'absolute',
    width: '100vw',
    height: '1px',
    bottom: 16,
    left: 40,
    backgroundColor: colors.gray5,
  },
};

function OpportunityHeader({ headerImage, logo, name, companyId, onClickLogo }) {
  const muiTheme = useTheme();
  const size = useWindowSize();
  const isMobile = size?.width < muiTheme.breakpoints.values.sm;

  function handleOrganizationClick() {
    onClickLogo(companyId);
  }

  return (
    <HeaderContainer>
      <HeaderImage image={headerImage} />
      <Box position="relative" top={-muiTheme.spacing(2)} left={muiTheme.spacing(3)}>
        <Flex directionRow alignCenter>
          <Box zIndex={10}>
            <Avatar
              name="organization-name"
              size={isMobile ? muiTheme.spacing(13) : muiTheme.spacing(15)}
              src={logo}
              onClick={handleOrganizationClick}
              style={{ backgroundColor: colors.white, objectFit: 'unset' }}
              containerStyle={{ boxShadow: shadows.clientEllipse }}
            />
          </Box>
          <Box ml={isMobile ? 2 : 3}>
            <Typography variant={isMobile ? 'h3' : 'h1'} style={{ color: colors.gray2 }}>
              {name}
            </Typography>
          </Box>
          {!isMobile && <div id="header-divider" style={classes.divider} />}
        </Flex>
      </Box>
    </HeaderContainer>
  );
}

OpportunityHeader.propTypes = {
  headerImage: PropTypes.string,
  logo: PropTypes.string,
  name: PropTypes.string,
  companyId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onClickLogo: PropTypes.func,
};

OpportunityHeader.defaultProps = {
  headerImage: '',
  logo: '',
  name: '',
  companyId: null,
  onClickLogo: () => {},
};

export { OpportunityHeader };