TheGame/packages/web/components/Player/PlayerHero.tsx

import { Avatar, Box, Container, Flex, HStack, Text } from '@metafam/ds';
import BackgroundImage from 'assets/login-background.jpg';
import { PlayerContacts } from 'components/Player/PlayerContacts';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
import { getPlayerImage, getPlayerName } from 'utils/playerHelpers';

type Props = { player: PlayerFragmentFragment };

export const PlayerHero: React.FC<Props> = ({ player }) => {
  return (
    <Box
      bgImage={`url(${BackgroundImage})`}
      backgroundSize="cover"
      h={{ base: '48', md: '3xs' }}
      mb="6"
    >
      <Container maxW="xl">
        <Flex pos="relative" top={{ base: '20', md: '10' }} align="center">
          <Avatar
            w={{ base: '32', md: '56' }}
            h={{ base: '32', md: '56' }}
            src={getPlayerImage(player)}
            name={getPlayerName(player)}
          />
          <Box pl="8">
            <Text fontSize="xl" fontFamily="heading" mb="1">
              {getPlayerName(player)}
            </Text>
            {player.playerType?.title ? (
              <Text color="offwhite">
                {player.playerType?.title.toUpperCase()}
              </Text>
            ) : null}
            <HStack mt="2">
              <PlayerContacts player={player} />
            </HStack>
          </Box>
        </Flex>
      </Container>
    </Box>
  );
};