GameWaiting.tsx

import React from 'react'
import { Button, Container, ListGroup, Navbar } from 'react-bootstrap'
import { GameDTO } from '../../utils/types'

interface Props {
  game: GameDTO
}
const GameWaiting: React.FC<Props> = ({ game }) => {
  return (
    <div>
      <Navbar bg='light' className='border-bottom'>
        <Container>
          <Navbar.Brand>7 Wonders</Navbar.Brand>
          <div className='d-flex justify-content-between align-items-center' style={{ width: '100%' }}>
            <div><strong>{game.playersPublic.length}</strong> players</div>
            <Button variant='outline-danger'>Exit game</Button>
          </div>
        </Container>
      </Navbar>

      <Container>
        <h2 className='mt-3'>Players list:</h2>
        <ListGroup className=' col-md-4'>
          {
            game.playersPublic.map(({ userName }, i) => (
              <ListGroup.Item key={i}>{userName}</ListGroup.Item>
            ))
          }
        </ListGroup>
      </Container>
    </div>
  )
}

export default GameWaiting