litle rewiev

package-lock.json

@@ -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": {

package.json

@@ -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": {

src/App.css

@@ -21,7 +21,7 @@
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
-  color: white;
+    color: rgb(255, 255, 255);
 }
 
 .App-link {

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>
+            <Main />
         </div>
-   
+    )
-  );
 }
 
-export default App;
+export default App

src/Components/GridComp/GridComp.jsx

@@ -5,10 +5,17 @@ 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 (
+        <div>
+            <Typography
+                component="h1"
+                sx={{ fontSize: 25, fontFamily: 'Montserrat' }}
+            >
+                {name}
+            </Typography>
             <Grid container spacing={2} sx={{ width: '100%' }} xs={9}>
-            {Array.from(Array(1000)).map(() => (
+                {Array.from(Array(8)).map(() => (
                     <Grid item xs={12} sm={3}>
                         <Card sx={{ height: '100%' }}>
                             <a href="/" className={styles.aboximg}>
@@ -23,7 +30,9 @@ export default function GridComp() {
                                                 />
                                                 <img
                                                     alt=""
-                                                className={styles.imgPreViev}
+                                                    className={
+                                                        styles.imgPreViev
+                                                    }
                                                     src="https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360"
                                                 />
                                             </div>
@@ -34,10 +43,16 @@ export default function GridComp() {
                             </a>
 
                             <CardContent>
-                            <Typography component="h5" className={styles.title}>
+                                <Typography
+                                    component="h5"
+                                    className={styles.title}
+                                >
                                     asdasdsasddasdasdasdasdasdasdas
                                 </Typography>
-                            <Typography variant="body2" color="text.secondary">
+                                <Typography
+                                    variant="body2"
+                                    color="text.secondary"
+                                >
                                     asfasfaasfasfa
                                 </Typography>
                                 <Typography
@@ -55,5 +70,6 @@ export default function GridComp() {
                     </Grid>
                 ))}
             </Grid>
+        </div>
     )
 }

src/Components/HeaderComp/HeaderComp.jsx

@@ -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>

src/Pages/Main.jsx

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

src/index.css

@@ -1,8 +1,9 @@
 body {
     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',
+        'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }