I'm trying to fit an image in CardMedia. Here's the code:
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image="../public/assets/bnha.jpg"
/>
<CardContent>
<Typography className={classes.title}>
Vigilante: Boku no Hero Academia Illegals Chapter 97
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Mar 13, 2021
</Typography>
</CardContent>
</CardActionArea>
</Card>
I can't figure out why the image won't render. Any idea what the issue is?
Related
I am using Material UI in a React app.
I have implemented cards with expandable dropdowns; click a card, get more info.
I want to implement multiple cards, separately expandable. Currently when I click the down arrow (to expand) on one card all cards expand.
I can't figure out what's going wrong. Here is my code.
const ExpandMore = styled((props) => {
const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}));
function Blogs(){
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<>
<Grid container direction="row" justifyContent="center">
<Grid item xs={4}>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="It’s a cocktail o’clock."
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://img.freepik.com/free-photo/selection-various-cocktails-table_140725-2909.jpg?w=2000"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body1" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
</Grid>
<Grid item xs={4}>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="Winner Winner Pizza Dinner"
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://cdn.shopify.com/s/files/1/0624/9853/articles/20220211142645-margherita-9920.jpg?crop=center&height=800&v=1660843558&width=800"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
</Grid>
</Grid>
</>
);
}
How can I align Graph Two and Graph three horizontally below Graph One ?
In other words I want to leave Graph One card how it is but move Graph two so it is on the same level and Graph three and they are horizontally aligned with one another below Graph One
This is what I have so far
import React from "react";
import Grid from "#mui/material/Grid";
import Container from "#mui/material/Container";
import Box from "#mui/material/Box";
import Typography from "#mui/material/Typography";
import Card from "#mui/material/Card";
import CardActions from "#mui/material/CardActions";
import CardContent from "#mui/material/CardContent";
import Button from "#mui/material/Button";
import Paper from "#mui/material/Paper";
const styles = {
card: {
minWidth: 275,
display: "inline-block"
}
};
const YourCardOne = () => {
return (
<Card variant="outlined" style={{ height: "200%" }}>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Graph One
</Typography>
<Typography variant="h5" component="h2">
Sarah Doria
</Typography>
<Typography color="textSecondary">Position</Typography>
<Typography variant="body2" component="p">
Company
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions></CardActions>
</Card>
);
};
const YourCardTwo = () => {
return (
<Card variant="outlined" style={{ height: "100%" }}>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Graph Two
</Typography>
<Typography variant="h5" component="h2">
Sarah Doria
</Typography>
<Typography color="textSecondary">Position</Typography>
<Typography variant="body2" component="p">
Company
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions></CardActions>
</Card>
);
};
const YourCardThree = () => {
return (
<Card variant="outlined" style={{ height: "100%" }}>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Graph Three
</Typography>
<Typography variant="h5" component="h2">
Sarah Doria
</Typography>
<Typography color="textSecondary">Position</Typography>
<Typography variant="body2" component="p">
Company
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions></CardActions>
</Card>
);
};
export default function GraphBackDrop() {
return (
<div>
<Container>
<Grid
container
spacing={3}
direction="row"
justify="center"
alignItems="stretch"
>
<Grid item xs={48}>
<Grid container spacing={25}>
<Grid item xs={12}>
<YourCardOne />
</Grid>
<Grid item xs={20} >
<YourCardTwo />
</Grid>
</Grid>
</Grid>
<Grid item xs={20}>
<YourCardThree />
</Grid>
</Grid>
</Container>
</div>
);
}
You can update your GraphBackDrop component to this:
export default function GraphBackDrop() {
return (
<Container>
<Grid
container
spacing={3}
justifyContent="center"
alignItems="stretch"
>
<Grid item xs={12}>
<YourCardOne />
</Grid>
<Grid item xs={12} sm={6}>
<YourCardTwo />
</Grid>
<Grid item xs={12} sm={6}>
<YourCardThree />
</Grid>
</Grid>
</Container>
);
}
Note: xs, sm, md, lg & xl are identified as breakpoints. It sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default).
If you want to learn more about MUI Grid component, refer to this official documentation.
I am using material UI components and I'm trying to make a card component. I want my text will be in the same row inbox component("phase" and "2" have to be in the same row). However, I couldn't do it. Here is my code;
<Card className={classes.rootMultiple} variant='outlined'>
<CardContent>
<Box>
<Box justifyContent={'start'}>
<Typography
variant='h5'
component='h2'
className={classes.titleMultiple}
>
phase
</Typography>
</Box>
<Box display='flex' justifyContent={'end'}>
<Typography
variant='h7'
component='h2'
className={classes.descriptionMultiple}
>
2
</Typography>
</Box>
</Box>
</CardContent>
</Card>;
Try to specify the display and flexDirection attributes in the parent's Box.
Then use the flex attribute on the children's `Box:
<Card className={classes.rootMultiple} variant='outlined'>
<CardContent>
<Box sx={{
display: 'flex',
flexDirection: 'row',
}}>
<Box flex={1}>
<Typography
variant='h5'
component='h2'
className={classes.titleMultiple}
>
phase
</Typography>
</Box>
<Box flex={0}>
<Typography
variant='h7'
component='h2'
className={classes.descriptionMultiple}
>
2
</Typography>
</Box>
</Box>
</CardContent>
</Card>
You can just write a Grid (that uses flex) with justify-content: space-between.
<Card className={classes.rootMultiple} variant='outlined'>
<CardContent>
<Grid container justifyContent="space-between">
<Grid item>
<Typography
variant='h5'
component='h2'
className={classes.titleMultiple}
>
phase
</Typography>
</Grid>
<Grid item>
<Typography
variant='h7'
component='h2'
className={classes.descriptionMultiple}
>
2
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
No need to make other components; less is better. Of course you can use Box with flex style, but Grid does it for you.
Note that h7 isn't a valid value for variant inside Typography.
EDIT: I wrote space-between only because your example prints the texts in the margins, but of corse you can use what you want: they will be always in same row.
I am following https://github.com/adrianhajdin/project_corona_tracker
https://www.youtube.com/watch?v=khJlrj3Y6Ls
So in this project the following api is used-
https://covid19.mathdro.id/api/daily
here I am getting covid cases values for each day. I need to display the number of cases that increased from yesterday to today
so I am trying to get values of current date confirmed cases(total cases)- yesterday's date confirmed cases
this is my card.jsx file:
import React from "react";
import { Card, CardContent, Typography, Grid } from "#material-ui/core";
import CountUp from "react-countup";
import cx from "classnames";
import styles from "./Cards.module.css";
const Info = ({ data: { confirmed, recovered, deaths, lastUpdate } }) => {
if (!confirmed) {
return "Loading...";
}
return (
<div className={styles.container}>
<Grid container spacing={3} justify="center">
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.infected)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Infected
</Typography>
<Typography variant="h5" component="h2">
<div>
---------------> total cases-yesterday's cases
</div>
<CountUp
start={0}
end={confirmed.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of active cases of COVID-19.
</Typography>
</CardContent>
</Grid>
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.recovered)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Recovered
</Typography>
<Typography variant="h5" component="h2">
<div>
{(
(Number(recovered.value) / Number(confirmed.value)) *
100
).toFixed(2)}{" "}
%
</div>
<CountUp
start={0}
end={recovered.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of recoveries from COVID-19.
</Typography>
</CardContent>
</Grid>
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.deaths)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Deaths
</Typography>
<Typography variant="h5" component="h2">
<div>
{(
(Number(deaths.value) / Number(confirmed.value)) *
100
).toFixed(2)}{" "}
%
</div>
<CountUp
start={0}
end={deaths.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of deaths caused by COVID-19.
</Typography>
</CardContent>
</Grid>
</Grid>
</div>
);
};
export default Info;
Here's one way to extract that data:
fetch('https://covid19.mathdro.id/api/daily', {
method: 'GET'
}).then(res => res.json()).then(d => {
let todayData = d[d.length - 1];
let yesterdayData = d[d.length - 2];
console.log({
todayData
});
console.log({
yesterdayData
});
// minus total confirmed today - yesterday
const todayTotalDiff = todayData.totalConfirmed - yesterdayData.totalConfirmed;
console.log(`minus total confirmed today - yesterday = ${todayTotalDiff}`);
});
I am using ReactJS Cards for my program
import Card from 'material-ui/Card/Card';
I want to go to a link, for example www.google.com, when I press on the card. How do I do this?
routeTo(){
window.open('http://www.google.com'); //This will open Google in a new
}
}
<Card className={classes.card} onClick={()=>this.routeTo()}>
<CardActionArea>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary" onClick={() => alert("Share")}>
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
Use
<a href="https://www.google.com/">
instead of Link component for external links.