@material-ui/core#CardContent JavaScript Examples

UICard = ({
  isLoading,
  title,
  children
}) => {
  const classes = useStyles();

  return (
    <Card className={clsx(classes.root)}>
      <CardContent className={classes.content}>
        {isLoading ? <Loading size={50} /> :
          <>
            <Typography className={classes.title} gutterBottom variant="h3" component="h2">
              {title}
            </Typography>
            {children}
          </>
        }
      </CardContent>
    </Card>
  );
}

CardComponent = ({ className, cardTitle, value, lastUpdate, cardSubtitle }) => (
  <Grid item xs={12} md={3} component={Card} className={cx(styles.card, className)}>
    <CardContent>
      <Typography color="textSecondary" gutterBottom>
        {cardTitle}
      </Typography>
      <Typography variant="h5" component="h2">
        <CountUp start={0} end={value} duration={2.75} separator="," />
      </Typography>
      <Typography color="textSecondary">
        {new Date(lastUpdate).toDateString()}
      </Typography>
      <Typography variant="body2" component="p">
        {cardSubtitle}
      </Typography>
    </CardContent>
  </Grid>
)

export default function ToolboxContainer({ getIsShown }) {
  const classes = useStyles();
  const { state } = useState();
  return (
    <Grow in={getIsShown()}>
      <div
        className={
          state.stepper_state === StepperState.VISUALIZE
            ? classes.root
            : classes.dataRoot
        }
      >
        <Typography
          className={
            state.stepper_state === StepperState.VISUALIZE
              ? classes.headerText
              : classes.dataHeaderText
          }
          variant="h5"
        >
          {state.stepper_state === StepperState.VISUALIZE
            ? "Toolbox"
            : state.stepper_state === StepperState.DATASET &&
              state.sample_dataset != null
            ? "Dataset Preview - " + datasetMetadata[state.sample_dataset].title
            : null}
        </Typography>
        <Card className={classes.card} variant="outlined">
          <CardContent className={classes.cardContent}>
            {getToolboxContent(state)}
          </CardContent>
        </Card>
      </div>
    </Grow>
  );
}

StatGrid = (props) => {
  const { className, ...rest } = props;
  const { stattext, totalcount, latestcount } = props;

  const classes = useStyles();

  return (
    <Card {...rest} className={clsx(className)}>
      <CardContent>
        <Grid container justify="space-between">
          <Grid item>
            <Typography
              className={classes.title}
              color="textSecondary"
              gutterBottom
              variant="body2"
            >
              {stattext}
            </Typography>
            <Typography className={classes.count}>{totalcount}</Typography>
          </Grid>
          {latestcount ? (
            <Grid item>
              <ArrowUpwardIcon className={classes.differenceIcon} />
              <Typography className={classes.differenceValue} variant="body2">
                {latestcount}
              </Typography>
            </Grid>
          ) : null}
        </Grid>
      </CardContent>
    </Card>
  );
}

export default function AppOrderTimeline() {
  return (
    <Card
      sx={{
        '& .MuiTimelineItem-missingOppositeContent:before': {
          display: 'none'
        }
      }}
    >
      <CardHeader title="Order Timeline" />
      <CardContent>
        <Timeline>
          {TIMELINES.map((item, index) => (
            <OrderItem key={item.title} item={item} isLast={index === TIMELINES.length - 1} />
          ))}
        </Timeline>
      </CardContent>
    </Card>
  );
}

BudgetSummary = ({ classes, income, spending, leftover }) => {
  const getLeftOverClass = () => {
    if (leftover > 0) {
      return classes.profit;
    } else if (leftover === 0) {
      return classes.neutral;
    }
    return classes.debt;
  };

  return (
    <Fragment>
      <Card className={classes.card} raised={true}>
        <CardContent>
          <Typography variant='h6'>You've budgeted...</Typography>
          <Typography variant='subtitle1'>Income: ${income}</Typography>
          <Typography variant='subtitle1'>
            Spending: <span className={classes.debt}>${spending}</span>
          </Typography>
          <hr />
          <Typography className={classes.leftoverText}>
            Left over: <span className={getLeftOverClass()}>${leftover}</span>
          </Typography>
        </CardContent>
      </Card>
    </Fragment>
  );
}

AboutCard = ({ image, title, body, hashtag }) => {
    const classes = useStyles()
    return(
        <Card elevation={2} className={classes.aboutCard}>
            <CardContent className={classes.aboutCardContent}>
                {image}
                <Typography variant="subtitle1" component="h5" className={classes.aboutCardTitle}>{title}</Typography>
                <Typography variant="body2" component="p" className={classes.aboutCardBody}>{body}</Typography>
                <Chip label={hashtag}/>
            </CardContent>
        </Card>
        )
}

function InfoBox({ title, cases, total, active, isRed, ...props }) {
  console.log(title, active);
  return (
    <Card
      onClick={props.onClick}
      className={`infoBox ${active && "infoBox--selected"} ${
        isRed && "infoBox--red"
      }`}
    >
      <CardContent>
        <Typography color="textSecondary" gutterBottom>
          {title}
        </Typography>
        <h2 className={`infoBox__cases ${!isRed && "infoBox__cases--green"}`}>
          {cases}
        </h2>

        <Typography className="infoBox__total" color="textSecondary">
          {total} Total
        </Typography>
      </CardContent>
    </Card>
  );
}

About = () => {
  const classes = useStyle();
  return (
    <Container>
      <Typography variant="h4" className={classes.contributers} component="h2">
        Contributers
      </Typography>
      {data.contributers.map((contributer) => (
        <Card className={classes.root} elevation={4}>
          <CardContent className={classes.content}>
            <Avatar alt="avatar" src={contributer.avatar_url}></Avatar>
            <Typography variant="h5" className={classes.name}>
              {contributer.name}
            </Typography>
          </CardContent>
          <CardActions className={classes.actions}>
            <IconButton href={contributer.username}>
              <GitHub className={classes.avatar} />
            </IconButton>
          </CardActions>
        </Card>
      ))}
    </Container>
  );
}

GitCoin = () => {
    const classes = useStyles();
    return (
        <Grid container justify="center" className={classes.subtitle}>
            <Grid item xs={12} sm={9} md={6}>
                <Card variant="outlined">
                    <CardContent>
                        <Typography variant="h4" color="textSecondary" paragraph>GitCoin Grants CLR Round 6</Typography>
                        <Typography variant="h6" paragraph>Spells.fyi is a community good that gets better with your support.</Typography>
                    </CardContent>
                    <CardActions>
                        <Button variant="contained" color="primary" href="https://gitcoin.co/grants/601/spellsfyi-see-the-future" target="_blank">Contribute to Spells.fyi</Button>
                    </CardActions>
                </Card>
            </Grid>
        </Grid>
    )
}

Post = ({ post, onCommentChange, onLike }) => {
  const firstCharacter = post.userName[0].toUpperCase();
  return (
    <Card className="ins-post">
      <Link
        to={`/profile/${post.userName}`}
        className="profile-navigation-link"
      >
        <CardHeader
          avatar={
            <Avatar style={{ background: getBackgroundColor(firstCharacter) }}>
              {firstCharacter || '-'}
            </Avatar>
          }
          title={post.userName}
        />
      </Link>
      <img
        className="ins-post-media"
        src={post.media}
        title={post.content}
        alt={post.title}
      />
      <CardActions disableSpacing>
        <IconButton aria-label="add to favorites" onClick={onLike}>
          <FavoriteBorderOutlined />
        </IconButton>
      </CardActions>
      <CardContent className="comments-section">
        <b>{`${post.likes || 0} Likes`}</b>
        {post.comment.map((c) => (
          <Comment {...c} />
        ))}
      </CardContent>
      <AddComment onCommentChange={onCommentChange} />
    </Card>
  );
}

Tile = props => {
  const { header, children, ...rest } = props
  return (
    <CardStyled {...rest}>
      <CardContent>
        <Typography>{header}</Typography>
        <div>{children}</div>
      </CardContent>
    </CardStyled>
  )
}

RouteRow = React.memo(( {data, index, style} ) => {
  const { t, i18n } = useTranslation()
  const { routeList } = data
  const route = routeList[index]
  const [routeNo, service_type] = route[0].split('+').slice(0,2)
  const classes = useStyles()
  const history = useHistory()
  const handleClick = () => {
    vibrate(1)
    setTimeout(() => {
      history.push('/'+i18n.language+'/route/'+route[0])
    }, 0)
  }

  return (
    <div onClick={handleClick} >
      <Card variant="outlined" key={route[0]} style={style} square>
        <CardActionArea>
          <CardContent className={classes.cardContent}>
            <Typography variant="h5" display="inline">{routeNo}</Typography>
            <Typography variant="caption"> - {route[1].co.map(co => t(co)).join('+')}</Typography>
            <br/>
            <RouteInfo route={route[1]} />
            <Typography variant="caption">{service_type >= 2 ? t('特別班次') : '　'}</Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </div>
  )
}, areEqual)

categoriesCard = data.map(item => (
    <Grid item sm={3}>
    <Card className="cardActions">
        <CardActionArea >
            <CardMedia className="card"
                image={require(`../../data/Images/${item.name}`).default}
                style={{ height: 300 }} />
            <CardContent>
                <Typography variant="h5"><span className="categoryName">{item.category}</span></Typography>
            </CardContent>
        </CardActionArea>
    </Card>
</Grid>
))

render() {

        const { classes, open } = this.state;

        return (
            <Dialog className={classes.thanksCard} open={open} onClick={this.props.accept} onClose={(event) => {this.props.onClose(event)}}>
                <CardActionArea className={classes.thanksCardArea}>
                    <CardHeader className={classes.thanksCardHeader}>
                        Thanks !
                    </CardHeader>
                    <CardContent className={classes.thanksCardContent}>
                        <div className={classes.thanksCardImage} />
                        Thanks for your engagement, we appreciate it a lot,
                        We have a new friend or user, do you want to join with a new person?
                    </CardContent>
                    <KindlyHappyEmojiIcon className={classes.thanksEmoji} />
                    <div className={classes.thanksButtonContainer}>
                        <Button color="primary" variant={"contained"} className={classes.thanksButton}>Invite a friend</Button>
                    </div>
                </CardActionArea>
            </Dialog>
        );
    }

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

  return (
    <Card>
      <CardContent>
        <Grid
          container
          justify="space-between"
          spacing={3}
        >
          <Grid item>
            <Typography
              color="textSecondary"
              gutterBottom
              variant="h6"
            >
              TOTAL PROFIT
            </Typography>
            <Typography
              color="textPrimary"
              variant="h3"
            >
              $23,200
            </Typography>
          </Grid>
          <Grid item>
            <Avatar className={classes.avatar}>
              <AttachMoneyIcon />
            </Avatar>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

// Card displaying user dashboard home page header.
function MainCard () {
  const classes = useStyles()
  const auth = useSelector(state => state.authReducer)

  return (
    <Card className={classes.mainHead}>
      <CardContent>
        <Typography className={classes.title} gutterBottom>
          Welcome to your EDA Dashboard
        </Typography>
        <Typography variant="h5" component="h2">
          Welcome {auth.user.username}...
        </Typography>
      </CardContent>
      <CardActions>
        <Button
          component={RouterLink}
          to="/dashboard/schematics"
          color="primary"
          size="small"
        >
          My Schematics
        </Button>
      </CardActions>
    </Card>
  )
}

InfoBox = props => {
  const { className, title, value, differenceValue, caption, ...rest } = props;
  const positiveDifference = differenceValue && differenceValue.charAt(0) === '+';
  const classes = useStyles({ positiveDifference, ...props });

  return (
    <Card {...rest} className={clsx(classes.root, className)} elevation={0}>
      <CardHeader
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title={title}
      />
      <CardContent>
        <Grid container justify="space-between">
          <Grid item>
            <Typography variant="h4">{value}</Typography>
          </Grid>
        </Grid>
        <div className={classes.difference}>
          <Typography className={classes.differenceValue} variant="body2">
            {differenceValue}
          </Typography>
          <Typography className={classes.caption} variant="caption">
            {caption}
          </Typography>
        </div>
      </CardContent>
    </Card>
  );
}

AccountDetails = props => {
  const { className, ...rest } = props;
  const { user } = useUser();
  const classes = useStyles();

  return (
    <Card
      {...rest}
      className={clsx(classes.root, className)}
    >
      <form
        autoComplete="off"
        noValidate
      >
        <CardHeader
          title="Linked Accounts"
        />
        <Divider />
        <CardContent>
          <Typography gutterBottom>
            If you are the owner of any organizations or repos, revoking your GitHub authorization will result in an interruption of service. No new commits will be imported.
          </Typography>
          <Button
            variant="outlined"
            color="primary"
            className={classes.button}
            startIcon={<Github />}
            href={`https://github.com/settings/installations/${user.githubAppId}`}
            target='_blank'
          >
            Manage Github Connection
          </Button>
        </CardContent>
      </form>
    </Card>
  );
}

BlockItem = ({ classes = {}, Icon, title, subtext, btnText, btnUrl }) => {
  const local = useStyles();
  const cn = key => classNames(classes[key], local[key]);

  return (
    <Card className={cn('root')} elevation={0}>
      <CardContent>
        <div className={cn('icon')}>
          <Icon className={cn('iconItem')} />
        </div>
        <Typography variant="h3" className={cn('title')} gutterBottom>
          {title}
        </Typography>
        <Typography variant="body1" className={cn('subtitle')}>
          {subtext}
        </Typography>
      </CardContent>
      <CardActions className={cn('actions')}>
        {btnUrl || btnText ? (
          <Link href={btnUrl}>
            <a className={cn('link')}>
              <Button variant="contained" size="large" color="secondary" className={cn('ctaButton')}>
                {btnText}
              </Button>
            </a>
          </Link>
        ) : null}
      </CardActions>
    </Card>
  );
}

PieCard = ({ title, subtitle, data }) => {
  const classes = useStyles();
  return (
    <Card className={classes.statistic}>
      <CardHeader title={title} subheader={subtitle} />
      <CardContent>
        <Chart data={data} height={200}>
          <PieSeries valueField="value" argumentField="title" innerRadius={0.6} />
          <Legend />
          <EventTracker />
          <Tooltip />
          <Animation />
        </Chart>
      </CardContent>
    </Card>
  );
}

AnalyticsChart = memo(({ data, chartType, title, height = '400px' }) => {
  const options = useMemo(() => ({
    ...chartOptions,
    title,
  }), [title]);
  return (
    <CardContent>
      <Chart
        width="100%"
        height={height}
        chartType={chartType}
        loader={<div>Loading Chart</div>}
        data={data}
        options={options}
      />
    </CardContent>
  )
})

AccordionSkeleton = () => {
  return (
		<Card>
			<CardContent>
				<Grid container>
					<Grid item sm={2}>
						<Typography variant="h7">
							<Skeleton animation="none" />
						</Typography>
					</Grid>
					<Grid item sm={9}></Grid>
					<Grid item sm={1}>
						<Grid container>
							<Grid item sm={8}></Grid>
							<Grid item sm={4}>
								<Skeleton variant="circle" animation="none" width={25} height={25}/>
							</Grid>
						</Grid>
					</Grid>
				</Grid>
			</CardContent>
		</Card>
		
  );
}

Landing = (props: LandingProps) => {
  const classes = useStyles();
  useEffect(() => {
    try {
      props.getHostInfo();
      checkSecureStorageStorageReady(props);
    } catch (e) {
      console.log(e);
    }
  }, [props]);

  return (
    <GreyCard className={classes.card}>
      <CardContent className={classes.content}>
        <p>Demo Mini App JS SDK</p>
        <p className={classes.info}>
          Platform: {props.platform ?? props.infoError ?? 'Unknown'}
          <br />
          Platform Version: {props.platformVersion ?? '-'}
          <br />
          Host Version: {props.hostVersion ?? '-'}
          <br />
          SDK Version: {props.sdkVersion ?? '-'}
          <br />
          Host Locale: {props.hostLocale ?? '-'}
        </p>
        <p className={classes.info}>
          Query Parameters: {window.location.search || 'None'}
        </p>
        <p className={classes.info}>
          URL Fragment: {window.location.hash || 'None'}
        </p>
        <p className={classes.info}>
          Secure Storage Status: {props.secureStorageStatus}
        </p>
      </CardContent>
    </GreyCard>
  );
}

export default function infographics() {
  return (
    <div className="about">
      {/* <Header /> */}
      <CarouselComponent />
      {infos.map((a, i) => (
        <Card className="mycard">
          <CardContent className="mycard-inner">
            <div className="teams-name">
              <img src={a.image} alt="" />
            </div>
            <Divider orientation="vertical" flexItem />
            <div className="main-time-div">
              <div>
                <h4 className="has">{a.desc}</h4>
                <a
                  href={a.linkk}
                  style={{ color: "blue" }}
                  target="_blank"
                  rel="noreferrer noopener"
                  download
                >
                  {" "}
                  Download Pdf
                </a>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
      {/* <Footer /> */}
    </div>
  );
}

SimpleCarbonEmissions = () => {
  const CO2 = text("CO2", "123,456,789");
  const trees = text("Trees", "2,057,613,150");
  return (
    <Card style={{ textAlign: "center", margin: "20px" }}>
      <CardContent>
        <CarbonEmissions CO2={CO2} trees={trees} />
      </CardContent>
    </Card>
  );
}

ArchivedCards = () => {
  const cards = useSelector((state) => state.board.board.cardObjects);
  const lists = useSelector((state) => state.board.board.listObjects);
  const dispatch = useDispatch();

  const onDelete = async (listId, cardId) => {
    dispatch(deleteCard(listId, cardId));
  };

  const onSendBack = async (cardId) => {
    dispatch(archiveCard(cardId, false));
  };

  return (
    <div>
      <List>
        {cards
          .filter((card) => card.archived)
          .map((card, index) => (
            <ListItem key={index} className='archived-card'>
              <Card>
                <CardContent>{card.title}</CardContent>
              </Card>
              <div>
                <Button
                  color='secondary'
                  onClick={() =>
                    onDelete(
                      lists.find((list) => list.cards.includes(card._id))._id,
                      card._id
                    )
                  }
                >
                  Delete Card
                </Button>
                <Button onClick={() => onSendBack(card._id)}>Send to List</Button>
              </div>
            </ListItem>
          ))}
      </List>
    </div>
  );
}

export default function EventCard({ event }) {
  const classes = useStyles();
  const [updateEvent] = useMutation(REGISTER_EVENT);

  const { user } = useAuth0();
  const navigate = useNavigate();

  const registerEvent = async () => {
    await updateEvent({
      variables: { id: event.id, email: user.email },
    });
    await navigate(`/calendar/${event.id}`);
  };

  return (
    <Card className={classes.root}>
      <CardActionArea className={classes.card}>
        <Box>
          <div className={classes.banner}>{event.type}</div>
          <CardMedia
            className={classes.cardImg}
            component="img"
            alt="Event"
            width="15rem"
            image={event?.imgUrl}
            title="Angel City Event"
          />
        </Box>
        <CardContent className={classes.content}>
          <Typography
            className={classes.cardDate}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.startDate} - {event.endDate}
          </Typography>
          <Typography
            className={classes.cardTitle}
            gutterBottom
            variant="h5"
            component="h2"
          >
            {event.title}
          </Typography>
          <Typography
            className={classes.cardLoc}
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {event.location}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions className={classes.btnContainer}>
        <SimpleModal event={event} registerEvent={registerEvent} />
      </CardActions>
    </Card>
  );
}

WorkHistory = ({writer}) => {
  const classes = useStyles();
  const workClasses = workStyles();

  return (
    <h3 className={classes.finalGrid}>
      Work History:
      {writer &&
        writer.workHistory &&
        writer.workHistory.map((writersWorkHistory) => (
          <Card
            className={workClasses.cardRoot}
            key={writersWorkHistory.id}
            variant="outlined"
          >
            <CardContent>
              <Typography
                className={workClasses.title}
                color="textSecondary"
                gutterBottom
                data-testid="company-header"
              >
                Company
              </Typography>
              <Typography variant="h5" component="h2">
                {writersWorkHistory.company}
              </Typography>
              <Typography
                className={workClasses.pos}
                color="textSecondary"
                data-testid="position-header"
              >
                Position: {writersWorkHistory.position}
              </Typography>
              <Typography variant="body2" component="p">
                Start Date: {writersWorkHistory.start_date}
                <br />
                {writersWorkHistory.current_position === "true"
                  ? `Current Position`
                  : `End Date: ${writersWorkHistory.end_date}`}
              </Typography>
              <Typography
                className={workClasses.pos}
                color="textSecondary"
              >
                responsibilities: {writersWorkHistory.responsibilities}
              </Typography>
            </CardContent>
          </Card>
        ))}
    </h3>
  );
}