\r\n {names.slice(0, count).map((name) => {\r\n return
;\r\n })}\r\n {overflow > 0 &&
}\r\n
\r\n );\r\n};\r\n","import { css } from \"emotion\";\r\nimport { flatten, uniq } from \"lodash\";\r\nimport React, { ReactNode } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Card, CardBody, CardSubtitle, CardTitle } from \"reactstrap\";\r\nimport { Game } from \"../../api\";\r\nimport { getPayoutsAsArray, getUniquePlayers } from \"../../utils\";\r\nimport { AvatarList } from \"../Avatar/AvatarList\";\r\n\r\nexport interface GamesListCardProps {\r\n game: Game;\r\n}\r\n\r\nconst classes = {\r\n link: css`\r\n color: inherit !important;\r\n text-decoration: none !important;\r\n `,\r\n\r\n card: css`\r\n margin-bottom: 16px;\r\n box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),\r\n 0px 2px 1px -1px rgba(0, 0, 0, 0.12);\r\n cursor: pointer;\r\n\r\n &:hover {\r\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14),\r\n 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\r\n }\r\n\r\n h6 {\r\n margin-bottom: 16px;\r\n font-size: 14px;\r\n color: grey;\r\n text-transform: uppercase;\r\n }\r\n `,\r\n\r\n cardBody: css`\r\n font-size: 14px;\r\n\r\n > div {\r\n margin-bottom: 32px;\r\n }\r\n `,\r\n\r\n gameNotStartedMessage: css`\r\n font-style: italic;\r\n `,\r\n};\r\n\r\nexport const GamesListCard = (props: GamesListCardProps) => {\r\n const { game } = props;\r\n\r\n let title = game.displayName;\r\n if (game.gameType === \"NCAATournament\") {\r\n title = game.displayName + \" - NCAA Tournament\";\r\n } else if (game.gameType === \"SuperBowl\") {\r\n title = game.displayName + \" - Super Bowl\";\r\n }\r\n\r\n const subtitle = `$${game.costPerSquare} per square`;\r\n\r\n const players = getUniquePlayers(game);\r\n\r\n const payoutString = getPayoutsAsArray(game)\r\n .map((payout) => \"$\" + payout)\r\n .join(\" / \");\r\n\r\n return (\r\n