Коммит для работы на ПК

package.json

@@ -28,7 +28,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "set PORT=5000 &&react-scripts start",
+    "start": "set port=5000 && react-scripts start",
+    "json-server": "npx json-server data.json --port 3000",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/App.css

@@ -21,7 +21,8 @@
 }
 
 .Footer {
-  height: 200px;
+  height: 150px;
+  align-items: center;
 }
 
 .bg-slate-300 {
@@ -33,11 +34,23 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-
   width: 75%;
   height: 300px;
 }
 
 #playlistButton {
   align-self: center;
+}
+
+#footer-text {
+  color: white;
+  font: 1em sans-serif;
+}
+
+#current-track {
+  height: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }

src/App.tsx

@@ -47,7 +47,7 @@ function App() {
 
   return (
   
-    <div className="App bg-red-800">     
+    <div className="App bg-slate-300">     
       <Header />
       <MenuBlock playlists={playlists} songs={songs} albums={albums} genres={genres}/>
           

src/components/CurrentTrack.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Table } from 'antd';
+import { Button, Col, Grid, Row, Table } from 'antd';
 import { PlayCircleOutlined } from '@ant-design/icons';
 import { ISong, SongProps } from '../models/IModels';
 import styled from 'styled-components'
@@ -62,15 +62,22 @@ export function CurrentTrack() {
   
   return (
     <Song >
-      <div className='' style={{height: '500%', width: '100%'}}>
-        <Table
+      <div id="current-track" className='container mx-auto' style={{width: '100%', zIndex: -1}}>
+        <Row className='w-full h-auto rounded bg-red-500'>
+          <Col>
+          SEX
+            <img src={song.cover} alt={song.cover} className='w-full h-auto rounded' /> *
+          </Col>
+        </Row>
+
+        {/* <Table
         columns={columns}
         dataSource={[song]}
         pagination={false}
         className='w-full h-auto rounded'
         showHeader={false}
       
-      />
+        /> */}
       </div>
       
     </Song>

src/components/Footer.tsx

@@ -5,10 +5,10 @@ import { ISong } from '../models/IModels';
 
 export function Footer() {
   return (
-    <div className="Footer bg-gray-600">
+    <div className="Footer bg-red-800">
       
       <div className="container mx-auto flex justify-between">
-        <p className="text-lg"> 2022 Music Service</p>
+        <p id="footer-text" className="text-lg"> 2022 Music Service</p>
         <ul className="flex">
           <li className="mr-4">
             <Button href="/about">About</Button>