resources/js/components/twitch-bot/GuessingWinner.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Col, Row } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 const GuessingWinner = ({ winner }) => {
   7         const { t } = useTranslation();
   8
   9         const classNames = ['guessing-game-winner', 'my-2', 'p-2', 'border', 'rounded'];
  10         if (!winner.score) {
  11                 classNames.push('no-points');
  12         }
  13
  14         return <div className={classNames.join(' ')}>
  15                 <Row>
  16                         <Col xs={6}>
  17                                 <div>{winner.uname}</div>
  18                                 <div>{t(
  19                                         'twitchBot.guessingGame.winnerScore',
  20                                         { count: winner.score, score: winner.score },
  21                                 )}</div>
  22                         </Col>
  23                         <Col xs={6}>
  24                                 <div className="fs-3 text-end">{winner.guess}</div>
  25                         </Col>
  26                 </Row>
  27         </div>;
  28 };
  29
  30 GuessingWinner.propTypes = {
  31         winner: PropTypes.shape({
  32                 guess: PropTypes.string,
  33                 score: PropTypes.number,
  34                 uname: PropTypes.string,
  35         }),
  36 };
  37
  38 export default GuessingWinner;