Some changes in Library page

src/App.scss

@@ -1,9 +1,11 @@
 @import "~bootstrap/scss/bootstrap";
+$mainColor: #0b5ed7;
 
 body {
   background-color: #34393d;
   color: white;
   font-family: "Catamaran", sans-serif;
+  height: 2000px;
 }
 
 .spoilerText {
@@ -59,6 +61,32 @@ body {
   margin-left: 7%;
 }
 
+.player-container {
+  z-index: 1;
+  margin-bottom: -72px;
+  padding: 25px 0;
+  transition: box-shadow 400ms;
+  display: flex;
+  justify-content: space-around;
+}
+
+.player-container > div {
+  text-decoration: underline $mainColor;
+}
+
+.sticky {
+  position: fixed;
+  width: 70%;
+  left: 20%;
+  top: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.sticky > div {
+  text-decoration: none;
+  opacity: 0.7;
+}
+
 .btn-circle {
   width: 38px;
   height: 38px;

src/components/Audio.js

@@ -1 +1,10 @@
-export const Audio = () => {};
+import { Link } from "react-router-dom";
+import { PlayerHeader } from "./PlayerHeader";
+
+export const Audio = ({ personal }) => {
+  return (
+    <div>
+      <PlayerHeader personal={personal} />
+    </div>
+  );
+};

src/components/PlayerHeader.js

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from "react";
+
+export const PlayerHeader = ({ personal }) => {
+ const [offset, setOffset] = useState(0);
+  useEffect(() => {
+    window.onscroll = () => {
+      setOffset(window.pageYOffset);
+    };
+  }, []);
+
+  return (
+    <>
+      <header
+        className={`mt-5 header-section player-container ${
+          offset > 50 ? "sticky" : ""
+        }`}
+      >
+        <div>#</div>
+        <div>Название</div>
+        <div>{personal ? "Плейлист" : "Владелец"}</div>
+        <div>Дата добавления</div>
+        <div>Длительность</div>
+      </header>
+    </>
+  );
+};

src/pages/Library.js

@@ -3,14 +3,18 @@ import { AuthCheck } from "./../components/AuthCheck";
 import { history } from "./../App";
 import { actionFindTracks, actionFindUser } from "./../actions/index";
 import { CMyDropzone } from "../components/Dropzone";
+import { Audio } from "./../components/Audio";
 
 const Library = ({ auth, promise, actionTracks, actionUser }) => {
   return (
     <div className="SearchPage">
       {auth.token && history.location.pathname === "/library" ? (
         <div className="d-block mx-auto mt-2 container w-50">
-          <h1>Ваша библиотека с музыкой, {promise?.user?.payload?.nick}</h1>
+          <h1 className="mb-3">
+            Ваша библиотека с музыкой, {promise?.user?.payload?.nick}
+          </h1>
           <CMyDropzone />
+          <Audio personal />
         </div>
       ) : (
         <div className="d-block mx-auto mt-2 container w-50">

src/pages/Search.js

@@ -5,6 +5,7 @@ import { history } from "./../App";
 import { Button } from "react-bootstrap";
 import { actionFindTracks, actionFindUser } from "./../actions/index";
 import { backURL } from "./../helpers/index";
+import { Audio } from "./../components/Audio";
 
 const Search = ({ auth, actionTracks, actionUser }) => {
   return (
@@ -14,6 +15,7 @@ const Search = ({ auth, actionTracks, actionUser }) => {
           <h1>Поиск по сайту</h1>
           <SearchField />
           <Button onClick={() => actionTracks()}>Tracks</Button>
+          <Audio />
         </div>
       ) : (
         <div className="d-block mx-auto mt-2 container w-50">