76 lines
3.6 KiB
JavaScript
76 lines
3.6 KiB
JavaScript
import React from 'react'
|
|
import Card from '@mui/material/Card'
|
|
import { CardContent, CardMedia, Grid } from '@mui/material'
|
|
import Typography from '@mui/material/Typography'
|
|
import styles from './GridComp.module.css'
|
|
|
|
// const Rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
|
|
export default function GridComp({ name, data }) {
|
|
return (
|
|
<div>
|
|
<Typography
|
|
component="h1"
|
|
sx={{ fontSize: 25, fontFamily: 'Montserrat' }}
|
|
>
|
|
{name}
|
|
</Typography>
|
|
<Grid container spacing={2} sx={{ width: '100%' }} xs={9}>
|
|
{(data || []).map((item) => (
|
|
<Grid item xs={12} sm={3}>
|
|
<Card sx={{ height: '100%' }}>
|
|
<a href="/" className={styles.aboximg}>
|
|
<CardMedia className={styles.MediaCard}>
|
|
<div style={{ boxSizing: 'inherit' }}>
|
|
<div className={styles.divbgimg}>
|
|
<div className={styles.divbgimg2}>
|
|
<img
|
|
alt=""
|
|
className={styles.imgBg}
|
|
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="
|
|
/>
|
|
<img
|
|
alt=""
|
|
className={
|
|
styles.imgPreViev
|
|
}
|
|
src={item.PosterUrlPreview}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <img src='https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360'></img> */}
|
|
</CardMedia>
|
|
</a>
|
|
|
|
<CardContent>
|
|
<Typography
|
|
component="h5"
|
|
className={styles.title}
|
|
>
|
|
{item.Ru_title}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="text.secondary"
|
|
>
|
|
{item.Orig_title}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ display: 'block' }}
|
|
>
|
|
{(item.Genres || []).map((e) => (
|
|
<a className={styles.Janres} href="/">
|
|
{e.genre}
|
|
</a>
|
|
))}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|