litle rewiev
Tulyaganov Shuhrat
parent
f5656d5b21
commit
5c65782eef
|
|
@ -15,9 +15,10 @@
|
|||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-scripts": "^5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@
|
|||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-scripts": "^5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
42
src/App.css
42
src/App.css
|
|
@ -1,38 +1,38 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
src/App.js
15
src/App.js
|
|
@ -1,13 +1,12 @@
|
|||
import './css/style.css'
|
||||
import Main from './Pages/Main';
|
||||
import Main from './Pages/Main'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Main></Main>
|
||||
</div>
|
||||
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Main />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
|
|
|
|||
|
|
@ -5,55 +5,71 @@ 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() {
|
||||
export default function GridComp({ name }) {
|
||||
return (
|
||||
<Grid container spacing={2} sx={{ width: '100%' }} xs={9}>
|
||||
{Array.from(Array(1000)).map(() => (
|
||||
<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="https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360"
|
||||
/>
|
||||
<div>
|
||||
<Typography
|
||||
component="h1"
|
||||
sx={{ fontSize: 25, fontFamily: 'Montserrat' }}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
<Grid container spacing={2} sx={{ width: '100%' }} xs={9}>
|
||||
{Array.from(Array(8)).map(() => (
|
||||
<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="https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <img src='https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360'></img> */}
|
||||
</CardMedia>
|
||||
</a>
|
||||
{/* <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}>
|
||||
asdasdsasddasdasdasdasdasdasdas
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
asfasfaasfasfa
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ display: 'block' }}
|
||||
>
|
||||
{Array.from(Array(Rand(1, 5))).map(() => (
|
||||
<a className={styles.Janres} href="/">
|
||||
dsadas
|
||||
</a>
|
||||
))}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
<CardContent>
|
||||
<Typography
|
||||
component="h5"
|
||||
className={styles.title}
|
||||
>
|
||||
asdasdsasddasdasdasdasdasdasdas
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
asfasfaasfasfa
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ display: 'block' }}
|
||||
>
|
||||
{Array.from(Array(Rand(1, 5))).map(() => (
|
||||
<a className={styles.Janres} href="/">
|
||||
dsadas
|
||||
</a>
|
||||
))}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,22 @@
|
|||
import React from 'react'
|
||||
import { AppBar, Toolbar, Typography, Button, IconButton } from '@mui/material'
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
Typography,
|
||||
Button,
|
||||
IconButton,
|
||||
Autocomplete,
|
||||
TextField,
|
||||
Stack,
|
||||
} from '@mui/material'
|
||||
import MenuIcon from '@mui/icons-material/Menu'
|
||||
import { useState } from 'react'
|
||||
|
||||
const top100Films = []
|
||||
|
||||
export default function HeaderComp() {
|
||||
const [value, setValue] = useState('')
|
||||
console.log(value)
|
||||
return (
|
||||
<header>
|
||||
<AppBar position="static">
|
||||
|
|
@ -23,6 +37,31 @@ export default function HeaderComp() {
|
|||
>
|
||||
News
|
||||
</Typography>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
width: 500,
|
||||
maxWidth: '100%',
|
||||
marginRight: '40%',
|
||||
}}
|
||||
>
|
||||
<Autocomplete
|
||||
id="free-solo-demo"
|
||||
freeSolo
|
||||
options={top100Films.map((option) => option.title)}
|
||||
onInputChange={(event, newImputValue) => {
|
||||
setValue(newImputValue)
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
<TextField
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...params}
|
||||
label="freeSolo"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
<Button color="inherit">Login</Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,14 @@ import HeaderComp from '../Components/HeaderComp/HeaderComp'
|
|||
export default function Main() {
|
||||
return (
|
||||
<div>
|
||||
<HeaderComp />
|
||||
|
||||
<Container>
|
||||
<HeaderComp />
|
||||
<GridComp />
|
||||
<GridComp name="Новое" />
|
||||
<div style={{ marginTop: '10%' }}>
|
||||
<GridComp name="Новое" />
|
||||
</div>
|
||||
|
||||
{/* <TestMedia></TestMedia> */}
|
||||
</Container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
margin: 0;
|
||||
background-color: #f2f2f2;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
|
||||
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
|
||||
'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue