stat

index.jsx

const Stat = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
`;

const TeamRank = styled.span`

`;

const StatValue = styled.span`

`;

const StatName = styled.span`

`;

const StatRow = ({ stat }) => {
  const { away, home } = stat;

  return (
    <div>
      <Stat>
        <TeamRank>#{away.team_rank}</TeamRank>
        <StatValue>{away.stat_value}</StatValue>
          
        <StatName>{away.stat_name}</StatName>
    
        <StatValue>{home.stat_value}</StatValue>
        <TeamRank>#{home.team_rank}</TeamRank>
      </Stat>
    </div>
  );
};