/

src/App.css

@@ -1,40 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .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;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-

src/App.js

@@ -3,14 +3,20 @@ import './App.css';
 import { Button } from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Header from "./Companents/Header";
+// import Playlist from "./Companents/CardPlaylist";
+
 
 
 function App() {
   return (
     <div> 
+      {/* <Search /> */}
       <Header />
+      {/* <onRegister /> */}
+      
+      {/* <CPlayList /> */}
     </div>
   );
 }
 
-export default App;
+export default App;

src/Companents/Header.js

@@ -1,63 +1,101 @@
-import React, { Component } from 'react';
+import React, { useState,Component } from 'react';
 import { Container, FormControl, Nav, Navbar, Form, Button } from 'react-bootstrap';
-import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import logoPhoto from '../assets/photo_logo.jpg';
+// import PageAuth from "../Companents/auth"
+// import { store } from "../store";
 
 import Home from "../Pages/Home"
-import Acc from "../Pages/Acc"
+// import Acc from "../Pages/Acc"
 import Top from "../Pages/Top"
 import New from "../Pages/New"
-import Playlists from "../Pages/Playlists"
-// import Logo from '../Companents/image_2021';
-export default class Header extends Component {
+import Acc from '../Pages/Acc';
+
+const Playllists = (props) => {
+  return (
+    <>
+      <div> wertyuio</div>
+      <div>{console.log(props)}</div>
+    </>
+  )
+}
+const Search = ({ history }) => {
+  const onClick = () => history.push(`/search/${value}`)
+  let [value, setValue] = useState('')
+  return (
+    <div class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" value={value} onChange={e => setValue(e.target.value)} onKeyDown={e => e.keyCode === 13 && onClick()} />
+    </div>
+  )}
+
+
+  // console.log(PagePlaylist)
+  export default class Header extends Component {
     render() {
-        return (
-            <>
-            {/*  */}
-                <Navbar collapseOnSelect expand="md" bg="secondary" variant="dark" >
-                    <Container>
-                        <Navbar.Brand href="/">
-                            <img
-                                src={logoPhoto}
-                                height="45"
-                                width="90"
-                                className="d-inline-block alight-top"
-                            // alt="Pelpe"
-                            />
-                        </Navbar.Brand>
-                        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-                        <Navbar.Collapse id="responsive-navbar-nav">
-                            <Nav className="mr-auto">
-                                <Nav.Link href="/">Home </Nav.Link>
-                                <Nav.Link href="/acc">Acc</Nav.Link>
-                                <Nav.Link href="/top">Top</Nav.Link>
-                                <Nav.Link href="/new">New</Nav.Link>
-                                <Nav.Link href="/playlists">Playlists</Nav.Link>
-                            </Nav>
-                            <Form inline>
-                                <FormControl
-                                    type="text"
-                                    placeholder="Search"
-                                    className="mr-sm-2"
-                                />
-                                <Button variant="btn btn-dark">Search</Button>
-                            </Form>
-                            
-                        </Navbar.Collapse>
-                    </Container>
-
-                </Navbar>
-
-                <Router>
-                    <Switch>
-                        <Route exact path="/" component={Home}/>
-                        <Route exact path="/acc" component={Acc}/>
-                        <Route exact path="/top" component={Top}/>
-                        <Route exact path="/new" component={New}/>
-                        <Route exact path="/playlists" component={Playlists}/>
-                    </Switch>
-                </Router>
-            </>
-        )
+      return (
+        <>
+
+          {/*  */}
+          <Navbar collapseOnSelect expand="md" bg="secondary" variant="dark" >
+            <Container>
+              <Navbar.Brand href="/">
+                <img
+                  src={logoPhoto}
+                  height="45"
+                  width="90"
+                  className="d-inline-block alight-top"
+                // alt="Pelpe"
+                />
+              </Navbar.Brand>
+              <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+
+              <Navbar.Collapse id="responsive-navbar-nav">
+                <Nav className="mr-auto">
+                  <Nav.Link href="/">Home </Nav.Link>
+                  <Nav.Link href="/acc">Acc</Nav.Link>
+                  <Nav.Link href="/top">Top</Nav.Link>
+                  <Nav.Link href="/new">New</Nav.Link>
+                  <Nav.Link href="/auth">Pages</Nav.Link>
+                  {/* <Nav.Link href="/new">New</Nav.Link> */}
+                  {/* <Nav.Link href="/playlists">Playlists</Nav.Link> */}
+                  {/* <Nav.Link href="/playllists/:_id">Playllists</Nav.Link> */}
+                </Nav>
+
+                <Form inline>
+                  <FormControl
+                    type="text"
+                    placeholder="Search"
+                    className="mr-sm-1"
+                  />
+                  <Button class="Search" variant="btn btn-dark">Search</Button>
+                </Form>
+              </Navbar.Collapse><Navbar.Collapse id="responsive-navbar-nav">
+                <Nav >
+                  {/* <Button variant="btn btn-dark" className="ml-2">  Log in / Sign in</Button> */}
+                  
+
+              </Nav>
+              </Navbar.Collapse>
+            </Container>
+          </Navbar>
+
+          <Router>
+            <Switch>
+              <Route exact path="/" component={Home} />
+              <Route exact path="/acc" component= {Acc} />
+              <Route exact path="/top" component={Top} />
+              <Route exact path="/new" component={New} />
+ 
+              {/* <Route exact path="/playlists" component={Playllists} /> */}
+            </Switch>
+          </Router>
+
+
+
+        </>
+
+      )
+
     }
-}
+  }
+

src/Companents/Search.js

@@ -0,0 +1,22 @@
+// import { FormControl, Form, Button, } from 'react-bootstrap';
+// import React, { useState,Component} from 'react';
+// import {  Button, Container } from 'react-bootstrap'
+// import React, {} from 'react';
+
+
+// export default class Search extends Component {
+//     render() {
+        
+//         const Search = ({history}) => {
+//             const onClick = ()=>history.push(`/search/${value}`)
+//             let [value, setValue] = useState('')
+//             return (
+//                 <div class="form-inline my-2 my-lg-0">
+//                     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" value={value} onChange={e => setValue(e.target.value)} onKeyDown={e => e.keyCode === 13 && onClick()}/>
+//                 </div>
+//             )
+//         }
+
+            
+//         }
+//     }

src/Companents/formRegister.js

@@ -0,0 +1,20 @@
+import React, {useState} from 'react'
+
+export default ({onRegister}) =>{
+    const [login, setLogin]         = useState('')
+    const [password1, setPassword1] = useState('')
+    const [password2, setPassword2] = useState('')
+
+    const valid = password1 === password2 && password1 && password1.length >=8
+
+    const style = {borderColor: valid ? "" : "red"}
+
+    return (
+        <div className='FormRegister'>
+            <div><input type='text' value={login} onChange={({target: {value}}) => setLogin(value)} placeholder='Login' /></div>
+            <div> <input type='password'  value={password1} onChange={({target: {value}}) => setPassword1(value)} placeholder='Password' style={style}/></div>
+            <div> <input type='password'  value={password2} onChange={({target: {value}}) => setPassword2(value)} placeholder='Password' style={style}/> </div>
+            <button onClick={()=> onRegister(login, password1)} disabled={!valid}>Register...</button>
+        </div>
+    )
+}

src/Pages/Acc.js

@@ -1,34 +1,57 @@
-import React, { Component,} from 'react'
-import {  Form ,Button, Container } from 'react-bootstrap'
+import React, { Component, useState} from 'react'
+import { Form, Button, Container, FormCheck } from 'react-bootstrap'
+       export default ({ onRegister }) => {
+            const [login, setLogin] = useState('')
+            const [password1, setPassword1] = useState('')
+            const [password2, setPassword2] = useState('')
 
-export default class Acc extends Component {
-    render() {
-        return (
-            <Container style={{width:"500px"}}>
+            const valid = password1 === password2 && password1 && password1.length >= 8
+
+            const style = {borderColor: valid ? "green" : "black" }
+
+            return (
+                    <Container style={{width:"500px"}}>
                 <h1 className="text-center">
                     Your accaunt
                 </h1>
                 <Form>
                     <Form.Group controlId="formBasicEmail">
-                    <Form.Label> Email</Form.Label>
-                        <Form.Control type="email" placeholder="Enter email" />
-                        <Form.Text>
-                            21jngvqnv= nv
-                        </Form.Text>
+                    <Form.Label> Login</Form.Label>
+                        <Form.Control type="login" value={login} placeholder="Enter login" onChange={({ target: { value } }) => setLogin(value)} />
+
                     </Form.Group>
                     <Form.Group controlId="formBasicPassword">
                         <Form.Label> Password</Form.Label>
-                        <Form.Control type="password" placeholder="Enter password" />
+                        <Form.Control type="password" placeholder="Enter password" value={password1} onChange={({ target: { value } }) => setPassword1(value)} />
+
                     </Form.Group>
-                    <Form.Group controlId="formBasicCheckbox">
-                        <Form.Check type="checkbox" label="Check" />
+                    <Form.Group controlId="formBasicPassword">
+                        <Form.Label> Confirm Password</Form.Label>
+                        <Form.Control type="password" placeholder="Confirm password"  value={password2} onChange={({ target: { value } }) => setPassword2(value)}  style={style}/>
                     </Form.Group>
-                    <Button variant="secondary" type="submit">Submit</Button>
+                   
+                    <Button variant="secondary" type="submit"onClick={()=> onRegister(login, password1)} disabled={!valid}>Registr</Button>
 
                 </Form>
             </Container>
-        )
+            )
+        }
+// export default class Acc extends Component {
+//     render() {
+//         return (
+
+                //    <div className='FormRegister'>
+                //     <div><input type='text' value={login} onChange={({ target: { value } }) => setLogin(value)} placeholder='Login' /></div>
+                //     <div> <input type='password' value={password1} onChange={({ target: { value } }) => setPassword1(value)} placeholder='Password' style={style} /></div>
+                //     <div> <input type='password' value={password2} onChange={({ target: { value } }) => setPassword2(value)} placeholder='Password' style={style} /> </div>
+                //     <button onClick={() => onRegister(login, password1)} disabled={!valid}>Register...</button>
+                // </div>
+
+ 
+
+
+//         )
 
-    }
+//     }
 
-}
+// }

src/Pages/Playlists.js

@@ -1,146 +1,152 @@
-import React, { Component } from 'react'
+// import React, { Component } from 'react'
 
-import { Container,Nav,  Row, Col, Tab} from 'react-bootstrap'
-export default class Playlists extends Component{
-    render() {
-        return (
-            <Container >
-            <Tab.Container  className="mt-3 "id="left-tabs-example" defaulActiveKey="first" >
-            <Row>
-                 <Col sm={4} >
-                    <Nav  className="flex-column mt-2 nav nav-pills variant-dark">
-                        <Nav.Item className="">
-                            <Nav.Link eventKey="first">1990</Nav.Link>
-                        </Nav.Item>
-                        <Nav.Item>
-                            <Nav.Link eventKey="second">1995</Nav.Link>
-                        </Nav.Item>
-                        <Nav.Item>
-                            <Nav.Link eventKey="third">2000</Nav.Link>
-                        </Nav.Item>
-                        <Nav.Item>
-                            <Nav.Link eventKey="fourth">2010</Nav.Link>
-                        </Nav.Item>
-                        <Nav.Item>
-                            <Nav.Link eventKey="fifth">2015</Nav.Link>
-                        </Nav.Item>
-                    </Nav>
-                </Col> 
-                <Col sm={8}>
-                    <Tab.Content className="mt-3">
-                        <Tab.Pane eventKey="first">
-                            <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
-                            <p>
-                            ////////////////////
-                            </p>
-                        </Tab.Pane>
-                        <Tab.Pane eventKey="second">
-                            <img src="https://i.pinimg.com/originals/0f/b4/60/0fb460ca668d097740d5550b3c820ce3.jpg"/>
-                            <p>
-                            ///////////////////
-                            </p>
-                        </Tab.Pane>
-                        <Tab.Pane eventKey="third">
-                            <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
-                            <p>
-                            ////////////////
-                            </p>
-                        </Tab.Pane>
-                        <Tab.Pane eventKey="fourd">
-                            <img src="https://cdn.lifehacker.ru/wp-content/uploads/2019/07/pl-dezh_1562681584-310x671.png"/>
-                            <p>
-                           //////////////////
-                            </p>
-                        </Tab.Pane>
-                        <Tab.Pane eventKey="fifth">
-                            <img src="https://mosproducer.ru/wp-content/uploads/2020/10/1-1.jpg"/>
-                            <p>
-                            ///////////////////
-                            </p>
-                        </Tab.Pane>
-                    </Tab.Content>
-                </Col> 
-            </Row>
-            </Tab.Container>
-        </Container>
-        )
-
-    }
-
-}
-// import { Tab } from 'bootstrap'
-// // import React, { Component } from 'react'
-// import { Container,Nav,  Row, Col} from 'react-bootstrap'
-// //   
+// import { Container,Nav,  Row, Col, Tab} from 'react-bootstrap'
 // export default class Playlists extends Component{
 //     render() {
 //         return (
-//             <Container>
-//                 <Tab.Container id="left-tabs-example" defaulActiveKey="first" >
-//                 <Row>
-//                      <Col sm={3}>
-//                         <Nav variant="pills" className="flex-column mt-2">
-//                             <Nav.Item>
-//                                 <Nav.Link eventKey="first">1990</Nav.Link>
-//                             </Nav.Item>
-//                             <Nav.Item>
-//                                 <Nav.Link eventKey="second">1995</Nav.Link>
-//                             </Nav.Item>
-//                             <Nav.Item>
-//                                 <Nav.Link eventKey="third">2000</Nav.Link>
-//                             </Nav.Item>
-//                             <Nav.Item>
-//                                 <Nav.Link eventKey="fourth">2010</Nav.Link>
-//                             </Nav.Item>
-//                             <Nav.Item>
-//                                 <Nav.Link eventKey="fifth">2015</Nav.Link>
-//                             </Nav.Item>
-//                         </Nav>
-//                     </Col> 
-//                     <Col sm={9}>
-//                         <Tab.Content>
-//                             <Tab.Pane eventKey="first">
-//                                 <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
-//                                 <p>
-//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+//             <Container >
+//             <Tab.Container  className="mt-3 "id="left-tabs-example" defaulActiveKey="first" >
+//             <Row>
+//                  <Col sm={4} >
+//                     <Nav  className="flex-column mt-2 nav nav-pills variant-dark">
+//                         <Nav.Item className="">
+//                             <Nav.Link eventKey="first">1990</Nav.Link>
+//                         </Nav.Item>
+//                         <Nav.Item>
+//                             <Nav.Link eventKey="second">1995</Nav.Link>
+//                         </Nav.Item>
+//                         <Nav.Item>
+//                             <Nav.Link eventKey="third">2000</Nav.Link>
+//                         </Nav.Item>
+//                         <Nav.Item>
+//                             <Nav.Link eventKey="fourth">2010</Nav.Link>
+//                         </Nav.Item>
+//                         <Nav.Item>
+//                             <Nav.Link eventKey="fifth">2015</Nav.Link>
+//                         </Nav.Item>
+//                     </Nav>
+//                 </Col> 
+//                 <Col sm={8}>
+//                     <Tab.Content className="mt-3">
+//                         <Tab.Pane eventKey="first">
+//                             <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
+//                             <p>
+//                             ////////////////////
+//                             </p>
+//                         </Tab.Pane>
+//                         <Tab.Pane eventKey="second">
+//                             <img src="https://i.pinimg.com/originals/0f/b4/60/0fb460ca668d097740d5550b3c820ce3.jpg"/>
+//                             <p>
+//                             ///////////////////
+//                             </p>
+//                         </Tab.Pane>
+//                         <Tab.Pane eventKey="third">
+//                             <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
+//                             <p>
+//                             ////////////////
+//                             </p>
+//                         </Tab.Pane>
+//                         <Tab.Pane eventKey="fourd">
+//                             <img src="https://cdn.lifehacker.ru/wp-content/uploads/2019/07/pl-dezh_1562681584-310x671.png"/>
+//                             <p>
+//                            //////////////////
+//                             </p>
+//                         </Tab.Pane>
+//                         <Tab.Pane eventKey="fifth">
+//                             <img src="https://mosproducer.ru/wp-content/uploads/2020/10/1-1.jpg"/>
+//                             <p>
+//                             ///////////////////
+//                             </p>
+//                         </Tab.Pane>
+//                     </Tab.Content>
+//                 </Col> 
+//             </Row>
+//             </Tab.Container>
+//         </Container>
+//         )
+
+//     }
+
+// }
+
+
+
+
+
+
+// // import { Tab } from 'bootstrap'
+// // // import React, { Component } from 'react'
+// // import { Container,Nav,  Row, Col} from 'react-bootstrap'
+// // //   
+// // export default class Playlists extends Component{
+// //     render() {
+// //         return (
+// //             <Container>
+// //                 <Tab.Container id="left-tabs-example" defaulActiveKey="first" >
+// //                 <Row>
+// //                      <Col sm={3}>
+// //                         <Nav variant="pills" className="flex-column mt-2">
+// //                             <Nav.Item>
+// //                                 <Nav.Link eventKey="first">1990</Nav.Link>
+// //                             </Nav.Item>
+// //                             <Nav.Item>
+// //                                 <Nav.Link eventKey="second">1995</Nav.Link>
+// //                             </Nav.Item>
+// //                             <Nav.Item>
+// //                                 <Nav.Link eventKey="third">2000</Nav.Link>
+// //                             </Nav.Item>
+// //                             <Nav.Item>
+// //                                 <Nav.Link eventKey="fourth">2010</Nav.Link>
+// //                             </Nav.Item>
+// //                             <Nav.Item>
+// //                                 <Nav.Link eventKey="fifth">2015</Nav.Link>
+// //                             </Nav.Item>
+// //                         </Nav>
+// //                     </Col> 
+// //                     <Col sm={9}>
+// //                         <Tab.Content>
+// //                             <Tab.Pane eventKey="first">
+// //                                 <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
+// //                                 <p>
+// //                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
                     
-//                                 </p>
-//                             </Tab.Pane>
-//                             <Tab.Pane eventKey="second">
-//                                 <img src="https://i.pinimg.com/originals/0f/b4/60/0fb460ca668d097740d5550b3c820ce3.jpg"/>
-//                                 <p>
-//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+// //                                 </p>
+// //                             </Tab.Pane>
+// //                             <Tab.Pane eventKey="second">
+// //                                 <img src="https://i.pinimg.com/originals/0f/b4/60/0fb460ca668d097740d5550b3c820ce3.jpg"/>
+// //                                 <p>
+// //                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
                     
-//                                 </p>
-//                             </Tab.Pane>
-//                             <Tab.Pane eventKey="third">
-//                                 <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
-//                                 <p>
-//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+// //                                 </p>
+// //                             </Tab.Pane>
+// //                             <Tab.Pane eventKey="third">
+// //                                 <img src="https://3dnews.ru/assets/external/illustrations/2018/10/12/976733/sp2.jpg"/>
+// //                                 <p>
+// //                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
                     
-//                                 </p>
-//                             </Tab.Pane>
-//                             <Tab.Pane eventKey="fourd">
-//                                 <img src="https://cdn.lifehacker.ru/wp-content/uploads/2019/07/pl-dezh_1562681584-310x671.png"/>
-//                                 <p>
-//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+// //                                 </p>
+// //                             </Tab.Pane>
+// //                             <Tab.Pane eventKey="fourd">
+// //                                 <img src="https://cdn.lifehacker.ru/wp-content/uploads/2019/07/pl-dezh_1562681584-310x671.png"/>
+// //                                 <p>
+// //                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
                     
-//                                 </p>
-//                             </Tab.Pane>
-//                             <Tab.Pane eventKey="fifth">
-//                                 <img src="https://mosproducer.ru/wp-content/uploads/2020/10/1-1.jpg"/>
-//                                 <p>
-//                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
+// //                                 </p>
+// //                             </Tab.Pane>
+// //                             <Tab.Pane eventKey="fifth">
+// //                                 <img src="https://mosproducer.ru/wp-content/uploads/2020/10/1-1.jpg"/>
+// //                                 <p>
+// //                                 Верстка сайта с нуля на react js библиотеке JavaScript для начинающих. В этом видео мы верстаем дальше и я покажу как сделать сайт на react js с п
                     
-//                                 </p>
-//                             </Tab.Pane>
-//                         </Tab.Content>
-//                     </Col> 
-//                 </Row>
-//                 </Tab.Container>
-//             </Container>
-//         )
+// //                                 </p>
+// //                             </Tab.Pane>
+// //                         </Tab.Content>
+// //                     </Col> 
+// //                 </Row>
+// //                 </Tab.Container>
+// //             </Container>
+// //         )
 
-//     }
+// //     }
 
-// }
+// // }