@material-ui/core#CardContent TypeScript Examples

function Movie({ id, name, age_limit, ticket, bookMovie }: MovieProps) {
  const classes = useStyles();

  return (
    <Card className={classes.root} variant="outlined">
      <CardContent>
        <Typography className={classes.title} color="textSecondary" gutterBottom>
          {name}
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
          age limit: {age_limit}
        </Typography>
      </CardContent>
      {
        ticket !== undefined
          ? (
            <CardActions>
              <Button size="small">Already Book</Button>
            </CardActions>
          )
          : (
            <CardActions onClick={() => bookMovie(id)}>
              <Button size="small">Reservation</Button>
            </CardActions>
          )
      }
    </Card>
  );
}

LatestBlock = (props: {block: BlockInfo}) => {

    return (
        <Card>
            <CardHeader title="Latest block"/>
            <CardContent>
                <Grid container alignItems="center">
                    <Grid item md={6} xs={12}>
                        <Typography variant="h6">Block number:</Typography>
                        <Typography variant="subtitle2">{props.block.number}</Typography>
                        <Divider light/>
                        <Box m={"0.5rem"}/>
                        <Typography variant="h6">Hash:</Typography>
                        <Typography variant="subtitle2">{props.block.hash}</Typography>
                    </Grid>
                </Grid>
            </CardContent>
        </Card>
    );
}

MainCard: React.FC<MainCardProps> = ({ title, actions, children }) => {
    const classes = useStyles();

    return (
        <Card className={classes.card}>
            <Typography className={classes.title} variant="h5" style={{ display: 'flex', alignItems: 'center' }}>
                <Box flexGrow={1}>
                    {title}
                </Box>

                {actions}
            </Typography>
            <CardContent>
                {children}
            </CardContent>
        </Card>
    );
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
          <Centered>
              <Card>
                  <CardHeader title="Signup For Our Newsletter" />
                  <CardContent>
                      <SubscribeForm />
                  </CardContent>
              </Card>
          </Centered>
      </header>
    </div>
  )
}

OnCallForScheduleCard = ({ schedule }: { schedule: Schedule }) => {
    const title = (
        <div style={{ display: "flex" }}>
            <Tooltip title={schedule.enabled ? 'Enabled' : 'Disabled'}>
                <div>{schedule.enabled ? <StatusOK /> : <StatusAborted />}</div>
            </Tooltip>
            {schedule.ownerTeam.name}
        </div>
    );

    return (
        <Card>
            <CardHeader title={title} titleTypographyProps={{ variant: 'h6' }} />
            <CardContent>
                <OnCallForScheduleList schedule={schedule} />
            </CardContent>
        </Card>
    );
}

ReasourceCard = ({
  href,
  imgUrl,
  title,
  description,
  action,
}: {
  href: string;
  imgUrl: string;
  title: string;
  description: string;
  action: string;
}) => {
  const classes = useStyles();
  return (
    <Card className={classes.card} raised={true} elevation={4}>
      <CardActionArea href={href} target="_blank">
        <CardMedia component="img" alt={title} src={imgUrl} title={title} />
        <CardContent>
          <Typography variant="h6" component="h2">
            {title}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button component="a" size="small" color="primary" href={href} target="_blank">
          {action}
        </Button>
      </CardActions>
    </Card>
  );
}

PreviewCatalogInfoComponent = (
  props: PreviewCatalogInfoComponentProps,
) => {
  const { repositoryUrl, entities, classes } = props;
  const catalogFilename = useCatalogFilename();

  return (
    <Card variant="outlined" className={classes?.card}>
      <CardHeader
        title={
          <code>{`${trimEnd(repositoryUrl, '/')}/${catalogFilename}`}</code>
        }
      />

      <CardContent className={classes?.cardContent}>
        <CodeSnippet
          text={entities
            .map(e => YAML.stringify(e))
            .join('---\n')
            .trim()}
          language="yaml"
        />
      </CardContent>
    </Card>
  );
}

SearchCard = () => {
  const classes = useStyles();

  const details: any = [];
  Object.keys(labelMap).forEach((key: string) => {
    details.push({
      type: 'boolean',
      title: labelMap[key].card,
      key,
      icon: labelMap[key].icon,
    });
  });
  return (
    <div>
      <CardHeader title="Search" />

      <CardContent>
        <Typography color="textPrimary" className={classes.cardMargin}>
          Great! Enter the name of their practice or the address of their clinic
          to get started.
        </Typography>
        <Typography color="textPrimary" className={classes.cardMargin}>
          If you can’t find them in our database, it’s unlikely that they are
          offering COVID-19 testing to their patients at this time.
        </Typography>

        <CardActions />
      </CardContent>
    </div>
  );
}

ListCard: React.SFC<ListCardProps> = ({ ...props }) => {
  const { data } = props;
  const { t } = useTranslation();

  const link = (id: any) => `/${props.link.start}/${id}/${props.link.end}`;

  const viewDetails = (id: any) => (
    <Link to={link(id)} className={styles.Link}>
      <p>{t('View Details')}</p>
    </Link>
  );
  return (
    <div className={styles.CardContainer}>
      {data.map((dataInfo: any) => (
        <Card variant="outlined" className={styles.Card} key={dataInfo.id}>
          <CardContent className={styles.CardContent}>
            <div data-testid="label">{dataInfo.label}</div>

            <Typography variant="body2" component="div" data-testid="description">
              {dataInfo.description}
            </Typography>
          </CardContent>
          <CardActions className={styles.CardActions}>
            {viewDetails(dataInfo.id)}
            {dataInfo.operations}
          </CardActions>
        </Card>
      ))}
    </div>
  );
}

PlayerCard: React.FC<PlayerCardProps> = ({ game, player }) => {
  return (
    <Card
      variant='outlined'
      className='PlayerCard'
      style={{
        backgroundColor: getCardColor(game, player.value),
      }}
    >
      <CardHeader
        className='PlayerCardTitle'
        title={player.name}
        titleTypographyProps={{ variant: 'subtitle2', noWrap: true }}
      />
      <CardContent className='PlayerCardContent'>
        <Typography variant='h2' className='PlayerCardContentMiddle'>
          {getCardValue(player, game)}
        </Typography>
      </CardContent>
    </Card>
  );
}

SingleSegmentCard = ({ segment }: SingleSegmentCardProps) => {
  const { t: translate } = useTranslation();
  const lineTypeLabel = getLineTypeLabel(segment.lineType);
  const trains = getTrainsFromSegment(segment);

  return (
    <Card>
      <CardContent>
        <Grid container>
          <SegmentCardHeader
            label={lineTypeLabel}
            fareLabel={`${segment.fare} ${translate("currency.baht")}`}
          />
          {/* TODO: handle convert segments to train */}
          {trains.map((train, index) => {
            return (
              <Train
                train={train}
                showLastStation={trains.length === 1 || index !== 0}
                key={"train" + index}
              />
            );
          })}
        </Grid>
      </CardContent>
    </Card>
  );
}

DocumentRequestCard = ({
  requestBody,
  defaultRequestBody,
  setRequestBody,
}: Props) => {
  let numDocuments = 0

  try {
    const req = JSON.parse(requestBody)
    numDocuments = req.data.length
  } catch (e) {}

  return (
    <DocumentCard>
      <CardHeader
        title={`Documents (${numDocuments})`}
        titleTypographyProps={{ variant: "subtitle1" }}
      />
      <CardContent>
        <DocumentRequest
          defaultRequestBody={defaultRequestBody}
          requestBody={requestBody}
          setRequestBody={setRequestBody}
        />
      </CardContent>
    </DocumentCard>
  )
}

ProductEditFormWithPreview: FC<{ toolbar: any }> = ({
    children,
    ...props
}) => {
    const classes = useStyles();
    useDefineAppLocation('catalog.products.edit', props);
    return (
        <FormWithRedirect
            {...props}
            render={(formProps): JSX.Element => {
                return (
                    <div className={classes.container}>
                        <Card>
                            <CardContent className={classes.root}>
                                <SimpleForm {...formProps}>
                                    {children}
                                </SimpleForm>
                            </CardContent>
                        </Card>
                        <div data-testid="product-edit-preview">
                            <FormDataConsumer>
                                {({ formData }): JSX.Element => {
                                    return <ProductPreview record={formData} />;
                                }}
                            </FormDataConsumer>
                        </div>
                    </div>
                );
            }}
        />
    );
}

NeoAddNewCard = ({ onCreatePressed }) => {
    return (
        <div>
            <Card style={{ background: "#e0e0e0" }}>
                <CardContent style={{ height: '429px' }}>
                    <Typography variant="h2" color="textSecondary" style={{ paddingTop: "155px", textAlign: "center" }}>
                        <Fab size="medium" className={"blue-grey"} aria-label="add"
                            onClick={() => {
                                onCreatePressed();
                            }} >
                            <AddIcon />
                        </Fab>
                    </Typography>
                </CardContent>
            </Card>
        </div>
    );
}

export default function Variation(props: Props) {
    const styles = useStyles();
    const showPromptForVariations = useSelector(selectShowPromptForVariations);

    return <Card className={styles.card}>
        <CardContent>
            { showPromptForVariations && (
                <>
                    <Typography className={styles.prompt}>{props.prompt}</Typography>
                    <span role={"img"} aria-label={"brain"}>?️</span>
                    <Typography className={styles.output} component={'span'}><strong>{props.output}</strong></Typography>
                </>
            )}
            { !showPromptForVariations && (
                <>
                    <span role={"img"} aria-label={"brain"}>?️</span>
                    <Typography className={styles.output} component={'span'}>{props.output}</Typography>
                </>
            )}
        </CardContent>
        { showPromptForVariations && (
            <CardActions>
                <Typography variant="caption">Temperature: {props.temperature}</Typography>
                <Typography variant="caption">Max tokens: {props.maxTokens}</Typography>
                <Typography variant="caption">Top P: {props.topP}</Typography>
                <Typography variant="caption">Frequency penalty: {props.frequencyPenalty}</Typography>
                <Typography variant="caption">Presence penalty: {props.presencePenalty}</Typography>
                <Typography variant="caption">Model: {props.modelName}</Typography>
            </CardActions>
        )
        }
    </Card>;
}

ProductItem: React.FC<ProductListProps> = ({ product }) => {
    const classes = useStyles();
    const bloc = useCartPloc();

    return (
        <Grid item xs={6} sm={4} md={3} lg={2}>
            <Card className={classes.card}>
                <CardMedia
                    className={classes.cardMedia}
                    image={product.image}
                    title="Image title"
                />
                <CardContent className={classes.cardContent}>
                    <Typography className={classes.productTitle} gutterBottom variant="subtitle1">
                        {product.title}
                    </Typography>
                    <Typography variant="h6" className={classes.productPrice}>
                        {product.price.toLocaleString("es-ES", {
                            style: "currency",
                            currency: "EUR",
                        })}
                    </Typography>
                </CardContent>
                <CardActions className={classes.cardActions}>
                    <Button
                        size="small"
                        color="primary"
                        onClick={() => bloc.addProductToCart(product)}>
                        Add to Cart
                    </Button>
                </CardActions>
            </Card>
        </Grid>
    );
}

Flag = (props: IFlagProps) => {
  const classes = useStyles();


  let cardColor, cardTitle, cardDesc, fontColor, flagColor, refreshColor;

  if (props.flag) {
    cardColor = green[400];
    cardTitle = "Well Done";
    cardDesc = "Seems like you completed this challenge.";
    fontColor = "#FFF";
    flagColor = amber[500];
    refreshColor = 'white';


  }
  else {
    cardColor = grey[200];
    cardTitle = "Find The Flag";
    cardDesc = "Solve the crypto challenge to get the flag";
    fontColor = grey[400];
    flagColor = fontColor;
    refreshColor = grey[400];
  }

  const resetChallenge = () => props.resetChallenge();


  return (
    <Box className={classes.root} style={{ backgroundColor: cardColor }}>
      <FlagIcon style={{ fontSize: 150, color: flagColor }} />
      <CardContent style={{ color: fontColor }}>

        <Typography gutterBottom variant="h5" component="h2">{cardTitle}</Typography>
        <Typography variant="subtitle1">
          {cardDesc}
        </Typography>

        <Typography variant="overline" display="block" gutterBottom >
          {props.flag || "Not found yet"}
        </Typography>

        <IconButton onClick={resetChallenge} disabled={!props.flag} style={{ color: refreshColor }} aria-label="Reset Challenge" component="span">
          <ReplayIcon />
        </IconButton>
      </CardContent>
    </Box>);
}

ValidatorReportCard = (props: { stash: string, report: Reports }) => {
    const copyValidatorStatistics = () => navigator.clipboard.writeText(scoringPeriodText)
    const [scoringPeriodText, setScoringPeriodText] = useState('')
    const useStyles = makeStyles({
        root: {
            minWidth: '100%',
            textAlign: 'left'
        },
        title: {
            fontSize: 18,
        },
        pos: {
            marginTop: 12,
        },
    });

    const classes = useStyles();

    useEffect(() => {
        updateScoringPeriodText()
    });

    const updateScoringPeriodText = () => {
        if (props.report.report.length > 0) {
            const scoringDateFormat = 'DD-MM-yyyy';
            const report = `Validator Date: ${moment(props.report.startTime).format(scoringDateFormat)} - ${moment(props.report.endTime).format(scoringDateFormat)}\nDescription: I was an active validator from era/block ${props.report.startEra}/${props.report.startBlock} to era/block ${props.report.endEra}/${props.report.endBlock}\nwith stash account ${props.stash}. (I was active in all the eras in this range and found a total of ${props.report.totalBlocks} blocks)`
            setScoringPeriodText(report)
        } else {
            setScoringPeriodText('')
        }
    }

    if (props.report.report.length > 0) {
        return (<Card className={classes.root}>
            <CardContent>
                <Typography className={classes.title} color="textPrimary" gutterBottom>
                    Validator Report:
                </Typography>
                { scoringPeriodText.split('\n').map((i, key) => <Typography key={key} className={classes.pos} color="textSecondary">{i}</Typography>) }
            </CardContent>
            <CardActions>
                <Button onClick={copyValidatorStatistics} size="small">Copy to clipboard</Button>
            </CardActions>
        </Card>)
    }
    return (
        <Card className={classes.root}>
            <CardContent>
                <Typography className={classes.pos} color="textSecondary">
                    No Data Available
                </Typography>
            </CardContent>
        </Card>
    )
}

HomePage: FunctionComponent = () => {
  const classes = useStyles();

  return (
    <>
      <Head>
        {/* The title of the webpage as displayed in the tab name. */}
        <title>{t('pages:page-title')}</title>
      </Head>
      <Container maxWidth={false} className={clsx(classes.background)}>
        <div className={classes.homeHeader}>
          {/* Use a bare PNG image. No weird WEBP handling should prevent rendering this. */}
          <NextImage
            priority
            src={'/images/logo.png'}
            width={80}
            height={80}
            className={classes.logo}
            alt={t('pages:page-title')}
          />
          <Typography variant="h3">{t('pages:page-title')}</Typography>
        </div>
        <div className={classes.homeBody}>
          <Grid container justify="center" spacing={2}>
            <Grid item xs={4} style={{ display: 'none' }}>
              <Link href="/achievements">
                <Card className={classes.pageButtonLink}>
                  <CardContent>
                    <Typography variant="h2" className={classes.pageButtonText}>
                      {t('pages:page-achievements')}
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </Grid>
            <Grid item xs={4}>
              <Link href="/map">
                <Card className={classes.pageButtonLink}>
                  <CardContent>
                    <Typography variant="h2" className={classes.pageButtonText}>
                      {t('pages:page-map')}
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </Grid>
          </Grid>
        </div>
        <div className={classes.homeFooter}>
          <Typography className={classes.subtitle}>
            {f('version-format', { version: getApplicationVersion() })}
          </Typography>
        </div>
      </Container>
    </>
  );
}

TestVariationList: React.FunctionComponent<IProps> = ({
  items,
  onDeleteClick,
}) => {
  const classes = useStyles();
  const [selectedItem, setSelectedItem] = React.useState<TestVariation | null>(
    null
  );

  const handleClose = () => {
    setSelectedItem(null);
  };

  return (
    <React.Fragment>
      <Grid container>
        {items.length === 0 && (
          <Typography variant="h5">No variations</Typography>
        )}
        {items.map((t) => (
          <Grid item key={t.id} xs={4}>
            <Card className={classes.card}>
              <CardMedia
                component="img"
                className={classes.media}
                image={staticService.getImage(t.baselineName)}
                title={t.name}
              />
              <CardContent>
                <TestVariationDetails testVariation={t} />
              </CardContent>
              <CardActions>
                <Button
                  color="primary"
                  component={Link}
                  to={`${routes.VARIATION_DETAILS_PAGE}/${t.id}`}
                >
                  History
                </Button>
                <IconButton
                  onClick={(event: React.MouseEvent<HTMLElement>) =>
                    setSelectedItem(t)
                  }
                >
                  <Delete />
                </IconButton>
              </CardActions>
            </Card>
          </Grid>
        ))}
      </Grid>

      {selectedItem && (
        <BaseModal
          open={!!selectedItem}
          title={"Delete TestVariation"}
          submitButtonText={"Delete"}
          onCancel={handleClose}
          content={
            <Typography>{`Are you sure you want to delete: ${selectedItem.name}?`}</Typography>
          }
          onSubmit={() => {
            onDeleteClick(selectedItem.id);
            handleClose();
          }}
        />
      )}
    </React.Fragment>
  );
}

BlogCard = ({
  blog,
  selection,
}: {
  blog: Blog;
  selection?: (blog: Blog) => void;
}): ReactElement => {
  const classes = useStyles();

  const { title, description, author, imgUrl, blogUrl, publishedAt } = blog;

  return (
    <Card
      className={classes.card}
      raised={true}
      onClick={() => {
        selection && selection(blog);
      }}
    >
      <CardActionArea className={classes.cardContent} component={Link} to={'/blog/' + blogUrl}>
        <CardMedia
          className={classes.cardMedia}
          component="img"
          alt={title}
          src={imgUrl}
          title={title}
        />
        <CardContent>
          <Typography variant="h6" component="h2" className={classes.cardTitle}>
            {title}
          </Typography>
          <Typography
            variant="body2"
            color="textSecondary"
            component="p"
            className={classes.cardDescription}
          >
            {description}
          </Typography>
        </CardContent>
        <CardHeader
          className={classes.cardAuthor}
          avatar={
            author.profilePicUrl ? (
              <Avatar aria-label={author.name} src={author.profilePicUrl} />
            ) : (
              <FirstLetter text={author.name} />
            )
          }
          title={author.name}
          subheader={convertToReadableDate(publishedAt)}
        />
      </CardActionArea>
    </Card>
  );
}

function Rule({ rule }) {
  const [showMoreDetails, setShowMoreDetails] = useState(false);
  const [language] = useLanguage();
  const classes = useStyles();

  const { from, to, details, moreDetails } = rule;

  const dateFromTo = [
    from ? `${i18n.FROM[language]} ${parseDate(from)}` : "",
    to ? `${i18n.TO[language]} ${parseDate(to)}` : "",
  ].join(" ");

  return (
    <Card className={classes.cardRoot} variant="outlined">
      <CardContent>
        {dateFromTo && (
          <Typography
            component={"div"}
            className={classes.dateFromTo}
            color="textPrimary"
            gutterBottom
          >
            ? {dateFromTo}
          </Typography>
        )}
        {rule.name && (
          <Typography variant="h5" component="h2">
            {getLocalizedValue(rule.name)}
          </Typography>
        )}

        {details && (
          <Typography
            component={"div"}
            color="textPrimary"
            className={classes.rulesList}
          >
            <List component="nav" dense={true}>
              {[...details, ...(showMoreDetails ? moreDetails : [])].map(
                (detail, index) => (
                  <ListItem button key={index}>
                    <ListItemText
                      classes={{ primary: classes.rule }}
                      primary={getLocalizedValue(detail)}
                    />
                  </ListItem>
                )
              )}
            </List>
          </Typography>
        )}
      </CardContent>
      {!showMoreDetails && moreDetails && (
        <CardActions classes={{ root: classes.cardActions }}>
          <Button
            size="medium"
            color="primary"
            variant="outlined"
            onClick={() => setShowMoreDetails(true)}
          >
            {i18n.MORE_INFO[language]}
          </Button>
        </CardActions>
      )}
    </Card>
  );
}

Bleaching = ({ dailyData, classes }: BleachingProps) => {
  const relativeTime = toRelativeTime(dailyData.date);

  return (
    <Card className={classes.root}>
      <CardHeader
        className={classes.header}
        title={
          <Grid container>
            <Grid item xs={12}>
              <Typography
                className={classes.cardTitle}
                color="textSecondary"
                variant="h6"
              >
                HEAT STRESS ALERT LEVEL
              </Typography>
            </Grid>
          </Grid>
        }
      />
      <CardContent className={classes.contentWrapper}>
        <Grid
          className={classes.content}
          container
          alignItems="center"
          alignContent="space-between"
          justify="center"
          item
          xs={12}
        >
          <img
            className={classes.alertImage}
            src={findIntervalByLevel(dailyData.weeklyAlertLevel).image}
            alt="alert-level"
          />
          <UpdateInfo
            relativeTime={relativeTime}
            timeText="Last data received"
            imageText="NOAA CRW"
            live={false}
            frequency="daily"
            href="https://coralsitewatch.noaa.gov/product/5km/index_5km_baa_max_r07d.php"
            withMargin
          />
        </Grid>
      </CardContent>
    </Card>
  );
}

PullRequestCard = ({
  pullRequest,
  simplified,
}: PullRequestCardProps) => {
  const title = (
    <Link to={pullRequest.link ?? ''} title={pullRequest.description}>
      {pullRequest.title}
    </Link>
  );

  const repoLink = (
    <Link to={pullRequest.repository?.url ?? ''} color="inherit">
      {pullRequest.repository?.name}
    </Link>
  );

  const creationDate = pullRequest.creationDate
    ? DateTime.fromISO(pullRequest.creationDate).toRelative()
    : undefined;

  const subheader = (
    <span>
      {repoLink} · {creationDate}
    </span>
  );

  const avatar = (
    <Avatar
      displayName={pullRequest.createdBy?.displayName}
      picture={pullRequest.createdBy?.imageUrl}
      customStyles={{ width: '2.5rem', height: '2.5rem', fontSize: '1rem' }}
    />
  );

  const classes = useStyles();

  return (
    <Card
      classes={{ root: classes.card }}
      data-pull-request-id={pullRequest.pullRequestId}
    >
      <CardHeader
        avatar={avatar}
        title={title}
        subheader={subheader}
        action={
          <AutoCompleteIcon hasAutoComplete={pullRequest.hasAutoComplete} />
        }
        classes={{
          ...(simplified && { root: classes.cardHeaderSimplified }),
          action: classes.cardHeaderAction,
        }}
      />

      {!simplified && (
        <CardContent className={classes.content}>
          {pullRequest.policies && (
            <PullRequestCardPolicies
              policies={pullRequest.policies}
              className={classes.policies}
            />
          )}

          {pullRequest.reviewers && (
            <PullRequestCardReviewers reviewers={pullRequest.reviewers} />
          )}
        </CardContent>
      )}
    </Card>
  );
}

export default function Home() {
  return (
    <Card>
      <CardContent>
        <FormikStepper
          initialValues={{
            firstName: '',
            lastName: '',
            millionaire: false,
            money: 0,
            description: '',
          }}
          onSubmit={async (values) => {
            await sleep(3000);
            console.log('values', values);
          }}
        >
          <FormikStep label="Personal Data">
            <Box paddingBottom={2}>
              <Field fullWidth name="firstName" component={TextField} label="First Name" />
            </Box>
            <Box paddingBottom={2}>
              <Field fullWidth name="lastName" component={TextField} label="Last Name" />
            </Box>
            <Box paddingBottom={2}>
              <Field
                name="millionaire"
                type="checkbox"
                component={CheckboxWithLabel}
                Label={{ label: 'I am a millionaire' }}
              />
            </Box>
          </FormikStep>
          <FormikStep
            label="Bank Accounts"
            validationSchema={object({
              money: mixed().when('millionaire', {
                is: true,
                then: number()
                  .required()
                  .min(
                    1_000_000,
                    'Because you said you are a millionaire you need to have 1 million'
                  ),
                otherwise: number().required(),
              }),
            })}
          >
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="money"
                type="number"
                component={TextField}
                label="All the money I have"
              />
            </Box>
          </FormikStep>
          <FormikStep label="More Info">
            <Box paddingBottom={2}>
              <Field fullWidth name="description" component={TextField} label="Description" />
            </Box>
          </FormikStep>
        </FormikStepper>
      </CardContent>
    </Card>
  );
}

render() {
    return (
      <Card elevation={0} className={classNames(this.props.className, this.props.classes.box, this.props.selected && this.props.classes.boxSelected)}>
        <CardHeader
          title={(
            <div className={this.props.classes.title}>
              {this.props.plan.title}
              {this.props.plan.beta && (
                <div className={this.props.classes.beta}>
                  EARLY<br />ACCESS
                </div>
              )}
            </div>
          )}
          titleTypographyProps={{ align: 'center' }}
        />
        <CardContent>
          {this.renderPriceTag()}
          {(this.props.overridePerks || this.props.plan.perks).map(perk => (
            <div key={perk.desc} style={{ display: 'flex', alignItems: 'baseline' }}>
              <CheckIcon fontSize='inherit' />
              &nbsp;
              <Typography variant='subtitle1'>
                {perk.desc}
                {!!perk.terms && (<>
                  &nbsp;
                  <HelpPopper description={perk.terms} />
                </>)}
              </Typography>
            </div>
          ))}
        </CardContent>
        {
          !!this.props.actionTitle && (
            <CardActions className={this.props.classes.actions}>
              {this.props.actionType === 'radio' ? (
                <FormControlLabel
                  label={this.props.actionTitle}
                  control={(
                    <Radio
                      checked={this.props.selected}
                      color='primary'
                      onChange={e => this.props.actionOnClick && this.props.actionOnClick()}
                      disabled={!this.props.actionOnClick}
                    />
                  )}
                />
              ) : (
                <Button
                  color='primary'
                  variant='contained'
                  disableElevation
                  style={{ fontWeight: 900 }}
                  onClick={this.props.actionOnClick}
                  disabled={!this.props.actionOnClick}
                  {...(this.props.actionTo ? {
                    component: Link,
                    to: this.props.actionTo,
                  } : {})}
                  {...(this.props.actionToExt ? {
                    component: 'a',
                    href: this.props.actionToExt,
                  } : {})}
                >
                  {this.props.actionTitle}
                </Button>
              )}
            </CardActions>
          )
        }
        {this.props.remark && (
          <div className={this.props.classes.remark}>
            <Typography variant='caption' component='div' color='textSecondary'>{this.props.remark}</Typography>
          </div>
        )}
      </Card >
    );
  }

SettingList: React.SFC = () => {
  const { t } = useTranslation();
  const { data: providerData, loading } = useQuery(GET_PROVIDERS);

  if (loading) return <Loading />;
  const SettingIcon = <Settingicon />;

  const List = [
    {
      name: 'Organisation',
      shortcode: 'organization',
      description: t('Manage organisation name, supported languages, hours of operations.'),
    },
    {
      name: 'Billing',
      shortcode: 'billing',
      description: t('Setup for glific billing account'),
    },
  ];

  const heading = (
    <Typography variant="h5" className={styles.Title}>
      <IconButton disabled className={styles.Icon}>
        {SettingIcon}
      </IconButton>
      {t('Settings')}
    </Typography>
  );

  let CardList: any = [];
  if (providerData) {
    // create setting list of Organisation & providers
    CardList = [...List, ...providerData.providers];
  }

  return (
    <>
      {heading}
      <div className={styles.CardContainer}>
        {CardList.map((data: any) => (
          <Card
            variant="outlined"
            className={styles.Card}
            key={data.shortcode}
            data-testid={data.shortcode}
          >
            <CardContent className={styles.CardContent}>
              <div data-testid="label" className={styles.Label}>
                {data.name}
              </div>
              <Typography
                variant="body2"
                component="div"
                data-testid="description"
                className={styles.Description}
              >
                {data.description}
              </Typography>
            </CardContent>
            <CardActions className={styles.CardActions}>
              <Link
                to={{
                  pathname: `settings/${data.shortcode}`,
                }}
                className={styles.Link}
              >
                <IconButton aria-label="Edit" color="default" data-testid="EditIcon">
                  <EditIcon />
                </IconButton>
              </Link>
            </CardActions>
          </Card>
        ))}
      </div>
    </>
  );
}

GameListSkeleton: React.FC = () => {
	const classes = useStyles()

	const cards = [...new Array(3)].map((_, index) => (
		<React.Fragment key={index}>
			<Card>
				<CardContent className={classes.cardContentGameItem}>
					<Grid container justify="space-between">
						<Skeleton
							animation="wave"
							variant="rect"
							height={30}
							width="30%"
						/>

						<Skeleton
							animation="wave"
							variant="circle"
							height={30}
						/>

						<Skeleton
							animation="wave"
							variant="rect"
							height={30}
							width="10%"
						/>
					</Grid>
				</CardContent>
			</Card>

			<Divider orientation="horizontal" size={2} />
		</React.Fragment>
	))

	return (
		<Grid container direction="column">
			<Skeleton
				animation="wave"
				variant="rect"
				height={30}
				width="30%"
			/>

			<Divider orientation="horizontal" size={5} />

			{cards}
		</Grid>
	)
}

CardPicker: React.FC<CardPickerProps> = ({ game, players, currentPlayerId }) => {
  const [randomEmoji, setRandomEmoji] = useState(getRandomEmoji);
  const playPlayer = (gameId: string, playerId: string, card: CardConfig) => {
    if (game.gameStatus !== Status.Finished) {
      updatePlayerValue(gameId, playerId, card.value, randomEmoji);
    }
  };
  const cards = getCards(game.gameType);

  useEffect(() => {
    if (game.gameStatus === Status.Started) {
      setRandomEmoji(getRandomEmoji);
    }
  }, [game.gameStatus]);
  return (
    <Grow in={true} timeout={1000}>
      <div>
        <div className='CardPickerContainer'>
          <Grid container spacing={4} justify='center'>
            {cards.map((card: CardConfig, index) => (
              <Grid key={card.value} item xs>
                <Slide in={true} direction={'right'} timeout={(1000 * index) / 2}>
                  <Card
                    id={`card-${card.displayValue}`}
                    className='CardPicker'
                    variant='outlined'
                    onClick={() => playPlayer(game.id, currentPlayerId, card)}
                    style={{
                      ...getCardStyle(players, currentPlayerId, card),
                      pointerEvents: getPointerEvent(game),
                    }}
                  >
                    <CardContent className='CardContent'>
                      {card.value >= 0 && (
                        <>
                          <Typography className='CardContentTop' variant='caption'>
                            {card.displayValue}
                          </Typography>
                          <Typography className='CardContentMiddle' variant='h4'>
                            {card.displayValue}
                          </Typography>
                          <Typography className='CardContentBottom' variant='caption'>
                            {card.displayValue}
                          </Typography>
                        </>
                      )}
                      {card.value === -1 && (
                        <Typography className='CardContentMiddle' variant='h3'>
                          {randomEmoji}
                        </Typography>
                      )}
                      {card.value === -2 && (
                        <Typography className='CardContentMiddle' variant='h3'>
                          ❓
                        </Typography>
                      )}
                    </CardContent>
                  </Card>
                </Slide>
              </Grid>
            ))}
          </Grid>
        </div>
        <Typography variant='h6'>
          {game.gameStatus !== Status.Finished
            ? 'Click on the card to vote'
            : 'Session not ready for Voting! Wait for moderator to start'}
        </Typography>
      </div>
    </Grow>
  );
}