@material-ui/core#Card JavaScript Examples

function EducationComponent(props) {
  const id = localStorage.getItem("draftID");
  const { loading, error, data } = useQuery(GET_DRAFT_QUERY, {
    variables: { id },
  });

  if (loading) return <p>loading</p>;
  if (error) return <p>ERROR: {error.message}</p>;
  if (!data) return <p>Not found</p>;

  if (data) {
    return (
      <Card>
        <h1>Education</h1>
        {data.getDraft.education.map((education) => {
          return (
            <div key={education.id}>
              <EducationCard
                education={education}
                updateEducationData={props.updateEducationData}
              />
            </div>
          );
        })}
      </Card>
    );
  }
}

export default function Loading({ twitter_handle }) {
	const classes = useStyles();
	const { processing, queued } = useSelector((state) => state.popWords);
	const dispatch = useDispatch();

	useEffect(() => {
		if (processing || queued) {
			const interval = setInterval(async () => {
				await dispatch(getStatus(twitter_handle));
			}, 20000);
			return () => clearInterval(interval);
		}
	}, [processing, queued, dispatch, twitter_handle]);

	return (
		<div style={{ display: "flex", justifyContent: "center" }}>
			<Card className={classes.root}>
				<div>
					<CardContent>
						<Typography className={classes.title} style={{ color: "#C772FF" }}>
							Analyzing
						</Typography>
						<Typography className={classes.title} style={{ color: "#6A4DE0" }}>
							Your followers...
						</Typography>
						<br />
						<Typography style={{ fontSize: "14pt" }}>
							Check back soon!
						</Typography>
						<Typography>Average wait time ~10 minutes</Typography>
					</CardContent>
				</div>
				<div>
					<AnalyzingPic style={{ width: "200px", height: "200px" }} />
				</div>
			</Card>
		</div>
	);
}

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>
)

render() {
        return (
            <React.Fragment>
                <Box>
                    <Typography variant="h3" color="primary" style={{ margin: '5px 15px 0 30px' }}>
                        {t('ehr', 'Timeline')}
                    </Typography>
                </Box>
                <Card>
                    <Box mt={1} style={{ position: 'relative' }}>
                        <Box ref={this.chartBoxRef} m={4}>
                            <canvas ref={this.chartRef} />
                        </Box>
                        {!this.state.completedPlugins.length && (
                            <div style={{ position: 'absolute', top: '30px', left: 'calc(50% - 10px)' }}>
                                <Typography variant="h3" color="primary">
                                    <CircularProgress size={48} color="primary" />
                                </Typography>
                            </div>
                        )}
                    </Box>
                    <Box>
                        <Box ml={4} mr={4} mt={2} mb={2}>
                            <Grid container direction="row" spacing={2} alignItems="center">
                                <Grid item xs={8}>
                                    <Grid container>{this.getDataButtons()}</Grid>
                                </Grid>
                                <Grid item xs={4} style={{ textAlign: 'right' }}>
                                    <TimeRangeFilter handleDateRangeChange={this.handleDateRangeChange} />
                                </Grid>
                            </Grid>
                        </Box>
                    </Box>
                </Card>
            </React.Fragment>
        );
    }

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 AppConversionRates() {
  const chartOptions = merge(BaseOptionChart(), {
    tooltip: {
      marker: { show: false },
      y: {
        formatter: (seriesName) => fNumber(seriesName),
        title: {
          formatter: (seriesName) => `#${seriesName}`
        }
      }
    },
    plotOptions: {
      bar: { horizontal: true, barHeight: '28%', borderRadius: 2 }
    },
    xaxis: {
      categories: [
        'Italy',
        'Japan',
        'China',
        'Canada',
        'France',
        'Germany',
        'South Korea',
        'Netherlands',
        'United States',
        'United Kingdom'
      ]
    }
  });

  return (
    <Card>
      <CardHeader title="Conversion Rates" subheader="(+43%) than last year" />
      <Box sx={{ mx: 3 }} dir="ltr">
        <ReactApexChart type="bar" series={CHART_DATA} options={chartOptions} height={364} />
      </Box>
    </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>
  );
}

render() {
    const { classes, t, location } = this.props;

    return (
      <div className={ classes.root }>
        <Card className={ `${classes.card} ${classes.apr}` } onClick={ () => { this.nav(location.pathname+'dashboard') } }>
          <BarChartIcon className={ `${classes.icon} icon` } />
          <Typography variant={'h3'} className={ `${classes.title} title` }>Dashboard</Typography>
          <Typography variant={'h4'} className={ `${classes.description} description` }>{ "Get a quick glance at how your portfolio is growing while invested in yearn's products." }</Typography>
        </Card>
        <Card className={ `${classes.card} ${classes.vault}` } onClick={ () => { this.nav(location.pathname+'vaults') }}>
          <PieChartIcon className={ `${classes.icon} icon` } />
          <Typography variant={'h3'} className={ `${classes.title} title` }>{ t("Home.Vaults") }</Typography>
          <Typography variant={'h4'} className={ `${classes.description} description` }>{ "Vaults follow a unique strategy that are designed to maximize the yield of the deposited asset and minimize risk." }</Typography>
        </Card>
        <Card className={ `${classes.card} ${classes.earn}` } onClick={ () => { this.nav(location.pathname+'earn') } }>
          <AttachMoneyIcon className={ `${classes.icon} icon` } />
          <Typography variant={'h3'} className={ `${classes.title} title` }>{ t("Home.Earn") }</Typography>
          <Typography variant={'h4'} className={ `${classes.description} description` }>{ "Earn performs profit switching for lending providers, moving your funds between dydx, Aave, Compound autonomously." }</Typography>
        </Card>
        <Card className={ `${classes.card} ${classes.zap}` } onClick={ () => { this.nav(location.pathname+'zap') } }>
          <FlashOnIcon className={ `${classes.icon} icon` } />
          <Typography variant={'h3'} className={ `${classes.title} title` }>{ t("Home.Zap") }</Typography>
          <Typography variant={'h4'} className={ `${classes.description} description` }>{ "Zaps help you save on gas fees. Zap directly into or out of Curve pools from the base assets." }</Typography>
        </Card>
        <Card className={ `${classes.card} ${classes.cover}` } onClick={ () => { window.open("https://yinsure.finance", "_blank") } }>
          <SecurityIcon className={ `${classes.icon} icon` } />
          <Typography variant={'h3'} className={ `${classes.title} title` }>{ t("Home.Cover") }</Typography>
          <Typography variant={'h4'} className={ `${classes.description} description` }>{ "Get cover with Nexus Mutual from yinsure.finance" }</Typography>
        </Card>
      </div>
    )
  }

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>
  );
}

ChartCard = styled(Card)`
  margin-bottom: 1em;
  height: 30rem;
  width: 100%;
  position: relative;
  padding-bottom: 1rem;
  padding-top: 1rem;
  padding-left: 1rem;
  color: black; /* TODO: figure out a way to make this color themeable */
`

TicketHeader = ({ loading, children }) => {
  const classes = useStyles();
  const history = useHistory();
  const handleBack = () => {
    history.push("/tickets");
  };

  return (
    <>
      {loading ? (
        <TicketHeaderSkeleton />
      ) : (
        <Card square className={classes.ticketHeader}>
          <Button color="primary" onClick={handleBack}>
            <ArrowBackIos />
          </Button>
          {children}
        </Card>
      )}
    </>
  );
}

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)

export default function AboutCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
    <React.Fragment>
      {about.map((data)=> (
      <CardActionArea>
        <CardContent>
          <Typography
            variant="body2"
            color="textPrimary"
            component="p"
            align="left"
            className={classes.pos2}
          >
            {data.desc}
          </Typography>
          
          {data.features.map((f) => (
            <Button variant="contained" color="primary" size="small" className={classes.cap} >
              {f.name}
            </Button>
        ))}

        </CardContent>
        </CardActionArea>
        
      ))}
        
       </React.Fragment>
    </Card>
  );
}

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>
))

MenuCard = ({ item, onAddItem }) => {
  const classes = useStyles()
  return (
    <Card style={{ padding: "10px" }}>
      <Grid container justify="space-between" spacing={5} direction="column">
        <Grid item>
          <Typography variant={"subtitle2"}>{item.name}</Typography>
        </Grid>
        <Grid item>
          <Grid container justify="space-between" alignItems="center">
            <Grid item>
              <Typography variant="body2">{item.price}</Typography>
            </Grid>
            <Grid item>
              <IconButton
                component="span"
                size="small"
                className={classes.iconButton}
                onClick={() => onAddItem(item)}
              >
                <img
                  src={addButton}
                  alt={"add-" + item.name}
                  style={{ width: "6vw", height: "6vh" }}
                />
              </IconButton>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Card>
  )
}

Metrics = () => {
  const {loading, error, data} = useQuery(query);
  const [newMetricName, setNewMetricName] = useState("");
  const [addMetric, { loading: mutationLoading }] = useMutation(addMetricMutation, {
    awaitRefetchQueries: true,
    refetchQueries: [{query}],
  });

  const metrics = data?.queryMetric || []

  return <>
    <Navbar title="Metrics" color="primary" />
    <Content>
      {loading && <Backdrop open={loading || mutationLoading} >
        <CircularProgress />
      </Backdrop>}
      {error && <Alert severity="error">Something Went Horribly Wrong</Alert>}
      <Card style={{ padding: 30 }}>
        <Typography>Here are the metrics currently configured:</Typography>
        <List>
          {metrics.map(({ name }, index) => <ListItem item key={index} sm={12} md={6} lg={3}>
            <Typography>{name}</Typography>
          </ListItem>)}
        </List>

        <TextField
          label="Add Metric"
          defaultValue={newMetricName}
          onChange={e => setNewMetricName(e.target.value)}
        />
        <UglyButton onClick={() => addMetric({ variables: { newMetricName } })} disabled={newMetricName === ""}>
          Add Metric
        </UglyButton>
      </Card>
    </Content>
  </>
}

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>
  );
}

CustomCard = (props) => {
  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeConfig();
  let classes=null;

  if(!isDarkTheme){
     classes = lightTheme();
  }else{
     classes = DarkTheme();
  }

  return (
    <Card className={"cardroot "+classes.card} variant="outlined">
      <div className="card-img-container"> 
        <img src={props.img} className={classes.imgcard} loading="lazy"/>
      </div>
      <CardContent>
        <Typography className={classes.overline} gutterBottom>SECCIÓN</Typography>
        <Typography className={classes.title}  gutterBottom variant="h5" component="h2">{props.title}</Typography>
        <Typography className={classes.body} variant="body2" component="p">{props.body}</Typography>
      </CardContent>
      <CardActions>
        <Button className={classes.button} href={props.href} >Leer Más</Button>    
      </CardActions>
  </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>
  );
}