resources/js/components/episodes/Item.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { useTranslation } from 'react-i18next';
   4
   5 import Players from './Players';
   6
   7 const Item = ({ episode }) => {
   8         const { t } = useTranslation();
   9
  10         return <div className="episodes-item d-flex align-items-start my-3 p-2 border rounded">
  11                 <div className="episode-start me-3 fs-4 text-end">
  12                         {t('schedule.startTime', { date: new Date(episode.start) })}
  13                 </div>
  14                 <div className="flex-fill">
  15                         {episode.title ?
  16                                 <div className="episode-title fs-4">
  17                                         {episode.title}
  18                                 </div>
  19                         : null}
  20                         {episode.event ?
  21                                 <div className="episode-event">
  22                                         {episode.event.title}
  23                                 </div>
  24                         : null}
  25                         <Players players={episode.players} />
  26                 </div>
  27         </div>;
  28 };
  29
  30 Item.propTypes = {
  31         episode: PropTypes.shape({
  32                 event: PropTypes.shape({
  33                         title: PropTypes.string,
  34                 }),
  35                 players: PropTypes.arrayOf(PropTypes.shape({
  36                 })),
  37                 start: PropTypes.string,
  38                 title: PropTypes.string,
  39         }),
  40 };
  41
  42 export default Item;