homework/project_marketplace/src/components/GridGallery/GridGallery.jsx

import { Button, DialogTitle, DialogContent, TextField, DialogActions, Container, Grid, Card, CardMedia, CardContent, Typography, CardActions } from '@mui/material';
// import { makeStyles } from '@mui/material/core/styles';
const GridGallery = ({ cards, backendURL }) => {
    return <div className='mainContent'>
        <Container className="cardGrid" maxWidth="md"> 
        <Grid container spacing={4}>
                {cards.map((card) => (
               <Grid item key={card._id} xs={12} sm={6} md={4 }>
                <Card className='card'>
                            {card.images && card.images[0] && card.images[0].url ? <CardMedia className="cardMedia"
                                image={`${backendURL}/${card.images[0].url}`} title="Image title"></CardMedia> : <CardMedia className="cardMedia">заглушка</CardMedia>}
                    <CardContent className="cardContent">
                                <Typography variant="h5" gutterBottom>{card.title  }</Typography>
                                <Typography >{card._id }</Typography>
                            </CardContent>
                            <CardActions>
                                <Button size="small"></Button>
                            </CardActions>
                            {/* <LayerIcon/> */}
                </Card>

            </Grid>))}          
            </Grid>
            </Container>
    </div>
}
 
export default GridGallery;