Dev t

README.md

@@ -1,4 +1,4 @@
-# Getting Started with Create React App
+# Music-platform on react
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.jsx

@@ -1,6 +1,6 @@
 import './App.css';
-import Main from './components/Main/Main';
-import Bar from './components/Bar/Bar';
+import Main from './pages/Main/components/Main/Main';
+import Bar from './pages/Main/components/Bar/Bar';
 function App() {
   return (
     <div className="App">

src/index.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );

src/components/Centerblock/Centerblock.jsx → src/pages/Main/components/Centerblock/Centerblock.jsx

@@ -8,9 +8,9 @@ function Centerblock(){
     const singers=['messi', 'Noize MC', 'RHCP', 'Pyrokinesis', 'Joy Division', 'Lol', 'mocker'];
     const years = ['1987', '2022', '1995', '2015', '1980'];
     const genres = ['rock', 'rap', 'hip-hop', 'post-punk', 'alternative rock', 'punk-rock'];
-    // const timeOut = setTimeout(()=>{
-    //   setIsSkeleton(false);
-    // }, 5000);
+    const timeOut = setTimeout(()=>{
+      setIsSkeleton(false);
+    }, 5000);
     const switchHandle=(e)=>{
       const target = e.target;
       const parent = target.parentElement;

src/components/Centerblock/Centerblock.module.css → src/pages/Main/components/Centerblock/Centerblock.module.css

@@ -235,13 +235,6 @@
   padding: 34px 24px 34px 34px;
   border-radius: 12px;
 }
-.author__list{
-
-}
-.year__list{
-}
-.genre__list{
-}
 .active{
   color: #ad61ff;
   border-color: #ad61ff;

src/pages/Main/components/PlayListItem/PlayListItem.jsx

@@ -0,0 +1,36 @@
+import c from './PlayListItem.module.css';
+export default function PlayList__item(props){
+    return(
+          <div className={c.playlist__item}>
+            <div className={`${c.playlist__track} ${c.track}`}>
+              <div className={`${c.track__title}`}>
+                <div className={c.track__title_image}>
+                  <svg className={c.track__title_svg} alt="music">
+                    {props.isSkeleton?(<img src='/img/Group12.png'></img>):
+                      (<use xlinkHref="img/icon/sprite.svg#icon-note"></use>)}
+                  </svg>
+                </div>
+                <div className={c.track__title_text}>
+                  {props.isSkeleton ? <div className={c.column1}></div>
+                    :<a className={c.track__title_link} href="http://">{props.title} <span className={c.track__title_span}>{props.span? props.span: ''}</span></a>}
+                </div>
+              </div>
+              <div className={`${c.track__author}`}>
+                {props.isSkeleton? <div className={c.column2}></div>
+                  :<a className={c.track__author_link} href="http://">{props.author}</a>}
+              </div>
+              {props.isSkeleton? <div className={c.column3}></div>
+                :<><div className={c.track__album}>
+                  <a className={c.track__album_link} href="http://">{props.album}</a>
+                  </div>
+                  <div className={c.track__time}>
+                      <svg className={c.track__time_svg} alt="time">
+                        <use xlinkHref="img/icon/sprite.svg#icon-like"></use>
+                      </svg>
+                      <span className={c.track__time_text}>{props.duration}</span>
+                  </div>
+                </>}
+            </div>
+          </div>
+    );
+}