Блок рекламы

data.json

@@ -497,5 +497,13 @@
                 "1", "2", "3"
             ]
         }
+    ],
+    "advertisements": [
+        {
+            "id": "1",
+            "name": "Advert 1",
+            "photo": "./src/september.png"
+        }
+
     ]
 }

src/App.css

@@ -1,10 +1,24 @@
 .App {
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   overflow-y: auto; /* Добавляет вертикальную прокрутку, если необходимо */
   min-height: calc(100vh - 60px - 60px);
   height: 100%
 }
 
+#app {
+  height: 100%;
+  width: 75%;
+  border: black;
+}
+
+#main-content {
+  display: flex;
+  flex-direction: row;
+}
+
 .body {
   height: 100%;
   margin: 0;
@@ -20,15 +34,6 @@
   color: #61dafb;
 }
 
-.Footer {
-  height: 150px;
-  align-items: center;
-}
-
-.bg-slate-300 {
-  background-image: linear-gradient(to right, #f0f4f8, #e6e9f0);
-}
-
 
 #playlists {
   display: flex;
@@ -47,10 +52,41 @@
   font: 1em sans-serif;
 }
 
-#current-track {
-  height: 20%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.Footer {
+  height: 200px;
   align-items: center;
+  padding: 1%;
+}
+
+.Header {
+  margin: 200 ;
+}
+
+.footer-button {
+  color: white;
+
+}
+
+.current-track {
+  height: 100px;
+  width: 75%;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+
+}
+
+.song-cover {
+
+  object-fit: scale-down;
+  height: 100%;
+  width: 5%;
+}
+
+.song-block {
+  
+}
+
+.AdBlock {
+
 }

src/App.tsx

@@ -8,11 +8,12 @@ import {Playlist} from './components/Playlist';
 import {Footer} from './components/Footer';
 import {CurrentTrack} from './components/CurrentTrack';
 import {SongsBlock} from './components/SongsBlock';
-import { ISong, IAlbum, IGenre, IBand, IPlaylist } from './models/IModels';
+import { ISong, IAlbum, IGenre, IBand, IPlaylist, IAdvertisement } from './models/IModels';
 import axios from 'axios';
 import { PlaylistsBlock } from './components/PlaylistsBlock';
 import { MenuBlock } from './components/MenuBlock';
 import { getGenres, getPlaylists, getSongs } from './scripts/scripts';
+import { AdBlock } from './components/AdBlock';
 
 
 function App() {
@@ -21,6 +22,7 @@ function App() {
   const [genres, setGenres] = React.useState<IGenre[]>([]);
   const [bands, setBands] = React.useState<IBand[]>([]);
   const [playlists, setPlaylist] = React.useState<IPlaylist[]>([]);
+  const [ads, setAds] = React.useState<IAdvertisement[]>([]);
 
   async function fetchData() {
     const responseSongs = getSongs();
@@ -47,13 +49,18 @@ function App() {
 
   return (
   
-    <div className="App bg-slate-300">     
-      <Header />
-      <MenuBlock playlists={playlists} songs={songs} albums={albums} genres={genres}/>
-          
-      <CurrentTrack /> 
-
-      <Footer />
+    <div className="App bg-slate-100">     
+      <div id="app" className='bg-white'>
+        <Header />
+        <div id='main-content'>
+          <MenuBlock playlists={playlists} songs={songs} albums={albums} genres={genres}/>
+          <AdBlock />
+          <CurrentTrack /> 
+        </div>
+        
+        <Footer />
+      </div>
+      
     </div>
   );
 }

src/components/AdBlock.tsx

@@ -0,0 +1,7 @@
+export function AdBlock() {
+    return (
+        <div className="AdBlock border-solid border-2 border-slate-100" style={{height: 'auto', minHeight: '100%', width: '30%'}}>
+            <p>Реклама</p>
+        </div>
+    );
+}

src/components/AdCard.tsx

@@ -0,0 +1,7 @@
+export function AdCard() {
+    return (
+        <div className="container mx-auto bg-slate-300" style={{height: 300, width: '75%'}}>
+            <p>Chart</p>
+        </div>
+    );
+}

src/components/CurrentTrack.tsx

@@ -5,44 +5,13 @@ import { ISong, SongProps } from '../models/IModels';
 import styled from 'styled-components'
 
 const Song = styled.div`
-  display: flex;
   align-items: center;
   position: fixed;
   bottom: 0;
-  width: 100%;`
+  width: 75%;`
 
 export function CurrentTrack() {
 
-  const columns = [
-    {
-      dataIndex: 'play',
-      key: 'play',
-      width: 50,
-      render: (text: string, song: ISong) => (
-        <button type="button" 
-          onMouseOver={e => e.currentTarget.style.background = "#222222"} 
-          onMouseOut={e => e.currentTarget.style.background = "none"}>
-          <img
-          className="rounded bg-slate-500"
-          src={song.cover}
-          alt={song.song_name}
-          style={{position: "relative", zIndex: -1}}
-        />
-        <PlayCircleOutlined className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
-        </button>
-      ),
-    },
-
-    {
-      dataIndex: 'song_name',
-      key: 'song_name',
-    },
-    {
-      dataIndex: 'band_name',
-      key: 'band_name',
-    }
-  ];
-
   const song = {
     "id": "5",
       "song_name": "Кем я стал",
@@ -62,22 +31,17 @@ export function CurrentTrack() {
   
   return (
     <Song >
-      <div id="current-track" className='container mx-auto' style={{width: '100%', zIndex: -1}}>
-        <Row className='w-full h-auto rounded bg-red-500'>
+      <div className='current-track'>
+        <Row className='w-full h-full rounded bg-slate-200 bg-opacity-80' style={{}}>
           <Col>
-          SEX
-            <img src={song.cover} alt={song.cover} className='w-full h-auto rounded' /> *
+            {/* <img src={song.cover} alt={song.cover} className='song-cover' /> */}
+            
+          </Col>
+          <Col>
+            {song.song_name}
           </Col>
         </Row>
 
-        {/* <Table
-        columns={columns}
-        dataSource={[song]}
-        pagination={false}
-        className='w-full h-auto rounded'
-        showHeader={false}
-      
-        /> */}
       </div>
       
     </Song>

src/components/Footer.tsx

@@ -5,16 +5,16 @@ import { ISong } from '../models/IModels';
 
 export function Footer() {
   return (
-    <div className="Footer bg-red-800">
+    <div className="Footer bg-red-900 border-solid border-2 border-slate-100">
       
-      <div className="container mx-auto flex justify-between">
+      <div className="container mx-auto">
         <p id="footer-text" className="text-lg"> 2022 Music Service</p>
         <ul className="flex">
           <li className="mr-4">
-            <Button href="/about">About</Button>
+            <a href="/about" className='footer-button' type='button'>About</a>
           </li>
           <li>
-            <Button href="/contact">Contact</Button>
+            <a href="/contact"  className='footer-button' type='button'>Contact</a>
           </li>
         </ul>
       </div>

src/components/Header.tsx

@@ -4,7 +4,7 @@ import { UserOutlined } from '@ant-design/icons';
 
 export function Header() {
   return (
-    <div className="flex items-center justify-between p-4 border-b bg-red-800">
+    <div className="flex items-center justify-between p-4 border-b bg-red-800 border-solid border-2 border-slate-100" >
       <h1 className="text-3xl font-bold">DEVIL music</h1>
       <Button href="/login" style={{ width: 30, height: 30 }}>
         <UserOutlined />

src/components/MenuBlock.tsx

@@ -33,13 +33,14 @@ export function MenuBlock({playlists, songs, albums, genres}: MenuBlockProps) {
     const tabs = [chartTab, playlistsTab, newSongsTab];
 
     return (
-        <div className="flex mx-auto" style={{display: 'block', width: '75%', 'background': 'linear-gradient(to right, #f0f4f8, #e6e9f0)'}}>
+        <div className="flex " style={{display: 'flex', alignSelf: 'flex-start', width: 'fit-content'}}>
             <Tabs
-                style={{width: '100%'}}
-                type="card"
-                className='container flex mx-auto  items-center justify-center'
+                
+                type="line"
+                className='container flex justify-start '
                 defaultActiveKey="Chart"
                 items={tabs}
+                style={{padding: '1%'}}
             />
         </div>
         

src/components/SongsBlock.tsx

@@ -46,10 +46,10 @@ export function SongsBlock({songs}: {songs: ISong[]}) {
   ]
 
   return (
-    <div className="flex justify-center items-center bg-slate-300">
+    <div className="song-block flex bg-white border-solid border-2 border-slate-100">
       
       <Table
-        style={{width: '100%'}}
+        style={{width: '100%' }}
         className=""
         dataSource={songs.map((s: ISong) => ({...s, play: ''}))}
         columns={columns}

src/models/IModels.ts

@@ -45,4 +45,10 @@ export interface IPlaylist {
 }
 export interface SongProps {
     song: ISong;
-  }
+  }
+
+export interface IAdvertisement {
+    id: string
+    name: string;
+    photo: string;
+}