stulyaganov
/
front-wiki-films
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

litle rewiev

main
Tulyaganov Shuhrat 2023-03-09 02:19:52 +03:00
parent f5656d5b21
commit 5c65782eef
8 changed files with 150 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@ -15,9 +15,10 @@
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "^5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"devDependencies": { "devDependencies": {

3
package.json
View File

@ -10,9 +10,10 @@
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "^5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {

42
src/App.css
View File

@ -1,38 +1,38 @@
.App { .App {
text-align: center; text-align: center;
} }
.App-logo { .App-logo {
height: 40vmin; height: 40vmin;
pointer-events: none; pointer-events: none;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.App-logo { .App-logo {
animation: App-logo-spin infinite 20s linear; animation: App-logo-spin infinite 20s linear;
} }
} }
.App-header { .App-header {
background-color: #282c34; background-color: #282c34;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
color: white; color: rgb(255, 255, 255);
} }
.App-link { .App-link {
color: #61dafb; color: #61dafb;
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

15
src/App.js
View File

@ -1,13 +1,12 @@
import './css/style.css' import './css/style.css'
import Main from './Pages/Main'; import Main from './Pages/Main'
function App() { function App() {
return ( return (
<div> <div>
<Main></Main> <Main />
</div> </div>
)
);
} }
export default App; export default App

108
src/Components/GridComp/GridComp.jsx
View File

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

41
src/Components/HeaderComp/HeaderComp.jsx
View File

@ -1,8 +1,22 @@
import React from 'react' 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 MenuIcon from '@mui/icons-material/Menu'
import { useState } from 'react'
const top100Films = []
export default function HeaderComp() { export default function HeaderComp() {
const [value, setValue] = useState('')
console.log(value)
return ( return (
<header> <header>
<AppBar position="static"> <AppBar position="static">
@ -23,6 +37,31 @@ export default function HeaderComp() {
> >
News News
</Typography> </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> <Button color="inherit">Login</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>

9
src/Pages/Main.jsx
View File

@ -6,9 +6,14 @@ import HeaderComp from '../Components/HeaderComp/HeaderComp'
export default function Main() { export default function Main() {
return ( return (
<div> <div>
<HeaderComp />
<Container> <Container>
<HeaderComp /> <GridComp name="Новое" />
<GridComp /> <div style={{ marginTop: '10%' }}>
<GridComp name="Новое" />
</div>
{/* <TestMedia></TestMedia> */} {/* <TestMedia></TestMedia> */}
</Container> </Container>
</div> </div>

17
src/index.css
View File

@ -1,13 +1,14 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', background-color: #f2f2f2;
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
sans-serif; 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-webkit-font-smoothing: antialiased; 'Helvetica Neue', sans-serif;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }