const projects = [{
title: "sample title",
description: "desc",
image: "https://via.placeholder.com/300x100"
},{
title: "sample title",
description: "desc",
image: "https://via.placeholder.com/300x100"
},{
title: "sample title",
description: "desc",
image: "https://via.placeholder.com/300x100"
},{
title: "sample title",
description: "desc",
image: "https://via.placeholder.com/300x100"
},]
const useStyles = makeStyles({
root: {
maxWidth: 300,
margin: "auto",
marginBottom: "10px"
},
media: {
height: 100
},
});
function App() {
const renderProjects = projects.map((project, index) => (
<Grid item xs={12} sm={6} m={3} lg={3} key={index}>
<ProjectCard
title={project.title}
description={project.description}
image={project.image}
/>
</Grid>
));
return (
<Grid
container
direction="row"
justify="center"
alignItems="center"
>
{renderProjects}
</Grid>
)
}
function ProjectCard({title, description, image}){
const classes = useStyles();
return(
<Card classes={{root: classes.root}}>
<CardActionArea>
<CardMedia
classes={{media: classes.media}}
component="img"
image={image}
title={title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{description}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));
<body>
<div id="root"></div>
<!-- React -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- MUI -->
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { Button, Grid, Card, CardActionArea, CardMedia, CardContent, Typography, CardActions, makeStyles } = MaterialUI;
</script>
</body>