TheGame/packages/web/components/Player/Section/PlayerCollab.tsx

import { Box, Divider, HStack, Text } from '@metafam/ds';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
import { FaClock } from 'react-icons/fa';

import { PlayerTimeZone } from '../PlayerTimeZone';

type Props = { player: PlayerFragmentFragment };
export const PlayerCollab: React.FC<Props> = ({ player }) => {
  return (
    <HStack
      spacing={6}
      divider={
        <Divider height="3rem" color="whiteAlpha.400" orientation="vertical" />
      }
    >
      <PlayerTimeZone player={player} />
      <Box>
        <Text fontSize="xs" color="blueLight" casing="uppercase" mb={3}>
          Availability
        </Text>
        <HStack alignItems="baseline">
          <FaClock color="blueLight" />
          <Text fontSize="lg" fontFamily="mono" mb="1">
            {player.availability_hours || '0'}h/week
          </Text>
        </HStack>
      </Box>
    </HStack>
  );
};