пофиксил курренттрек

data.json

@@ -10,9 +10,11 @@
             "source": "source_path",
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "playlists": [
-                {"id": "1", "name": "Playlist 1"},
+                "1",
-                {"id": "2", "name": "Playlist 2"}
+                "2"
-            ]
+            ],
+            "genreid": "1",
+            "genre_name": "Rock"
         },
         {
             "id": "2",
@@ -24,8 +26,10 @@
             "source": "source_path",
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "playlists": [
-                {"id": "2", "name": "Playlist 2"}
+                "2"
-            ]
+            ],
+            "genreid": "1",
+            "genre_name": "Rock"
         }, 
         {
             "id": "3",
@@ -38,9 +42,10 @@
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh"
             ,
             "playlists": [
-                {"id": "1", "name": "Playlist 1"},
+                "1", "3"
-                {"id": "3", "name": "Playlist 3"}
+            ],
-            ]
+            "genreid": "1",
+            "genre_name": "Rock"
         },   
         {
             "id": "4",
@@ -52,9 +57,10 @@
             "source": "source_path",
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "playlists": [
-                {"id": "2", "name": "Playlist 2"},
+                "2", "3"
-                {"id": "3", "name": "Playlist 3"}
+            ],
-            ]
+            "genreid": "1",
+            "genre_name": "Rock"
         },  
         {
             "id": "5",
@@ -66,8 +72,10 @@
             "source": "source_path",
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "playlists": [
-                {"id": "3", "name": "Playlist 3"}
+                "3"
-            ]
+            ],
+            "genreid": "1",
+            "genre_name": "Rock"
         },
         {
             "id": "1",
@@ -79,9 +87,10 @@
             "source": "source_path",
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "playlists": [
-                {"id": "1", "name": "Playlist 1"},
+                "1", "2"
-                {"id": "2", "name": "Playlist 2"}
+            ],
-            ]
+            "genreid": "1",
+            "genre_name": "Rock"
         },
         {
             "id": "2",
@@ -93,8 +102,10 @@
             "source": "source_path",
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "playlists": [
-                {"id": "2", "name": "Playlist 2"}
+                "2"
-            ]
+            ],
+            "genreid": "1",
+            "genre_name": "Rock"
         }, 
         {
             "id": "3",
@@ -107,9 +118,10 @@
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh"
             ,
             "playlists": [
-                {"id": "1", "name": "Playlist 1"},
+                "1", "3"
-                {"id": "3", "name": "Playlist 3"}
+            ],
-            ]
+            "genreid": "1",
+            "genre_name": "Rock"
         },   
         {
             "id": "4",
@@ -121,9 +133,10 @@
             "source": "source_path",
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "playlists": [
-                {"id": "2", "name": "Playlist 2"},
+                "2", "3"
-                {"id": "3", "name": "Playlist 3"}
+            ],
-            ]
+            "genreid": "1",
+            "genre_name": "Rock"
         },  
         {
             "id": "5",
@@ -135,8 +148,10 @@
             "source": "source_path",
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "playlists": [
-                {"id": "3", "name": "Playlist 3"}
+                "3"
-            ]
+            ],
+            "genreid": "1",
+            "genre_name": "Rock"
         }   
     ],
     "albums": [
@@ -153,7 +168,7 @@
         {
             "id": "2",
             "name": "Album 2",
-            "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=false",
+            "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false",
             "year": 2020,
             "genres": [
                 "Post-Punk",
@@ -164,7 +179,7 @@
             "id": "3",
             "name": "Album 3",
             "year": 2021,
-            "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
+            "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false",
             "genres": [
                 "Post-Punk",
                 "Punk"
@@ -232,7 +247,7 @@
             "id": "2",
             "name": "Playlist 2",
             "songs": [],
-            "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
+            "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false",
             "description": "Плейлист прикольный 2"
 
         },
@@ -256,7 +271,7 @@
             "id": "2",
             "name": "Playlist 2",
             "songs": [],
-            "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
+            "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false",
             "description": "Плейлист прикольный 2"
 
         },
@@ -267,38 +282,6 @@
             "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
             "description": "Плейлист прикольный 3"
 
-        },
-        {
-            "id": "1",
-            "name": "Playlist 1",
-            "songs": [],
-            "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
-            "description": "Плейлист прикольный"
-
-        },
-        {
-            "id": "2",
-            "name": "Playlist 2",
-            "songs": [],
-            "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
-            "description": "Плейлист прикольный 2"
-
-        },
-        {
-            "id": "3",
-            "name": "Playlist 3",
-            "songs": [],
-            "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
-            "description": "Плейлист прикольный 3"
-
-        },
-        {
-            "id": "4",
-            "name": "Playlist 4",
-            "songs": [],
-            "cover": "https://avatars.yandex.net/get-music-content/10129881/f3cf1afc.a.30561322-1/m1000x1000?webp=falseh",
-            "description": "Плейлист прикольный 4"
-
         }
     ]
 }

src/App.css

@@ -15,16 +15,14 @@
 
 #Footer {
   background-color: #282c34;
-  min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
-  bottom: 0;
   width: 100%;
-  position: absolute;
+  position: relative;
 }
 
 /* Добавление градиента к блоку прокрутки */
@@ -32,3 +30,18 @@
   background-image: linear-gradient(to right, #f0f4f8, #e6e9f0);
 }
 
+.CurrentTrack {
+  position: fixed;
+  bottom: 0;
+  
+}
+
+.playlists {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  width: 100%;
+  position: relative;
+}

src/App.tsx

@@ -41,6 +41,8 @@ function App() {
     []
   )
   
+  const song = songs[1];
+
   return (
   
     <div className="App scrollbar scrollTop ">     
@@ -48,8 +50,9 @@ function App() {
       
       <PlaylistsBlock playlists={playlists} />
       <SongsBlock songs={songs}/>
+      <CurrentTrack />
 
-      <Footer />
+      {/* <Footer /> */}
 
       
     </div>

src/components/CurrentTrack.tsx

@@ -3,11 +3,11 @@ import { Button, Table } from 'antd';
 import { PlayCircleOutlined } from '@ant-design/icons';
 import { ISong, SongProps } from '../models/IModels';
 
-export function CurrentTrack({song}: {song: ISong}) {
+export function CurrentTrack() {
 
   const columns = [
     {
-      title: 'Play',
+      title: '',
       dataIndex: 'play',
       key: 'play',
       width: 50,
@@ -31,6 +31,23 @@ export function CurrentTrack({song}: {song: ISong}) {
     }
   ];
 
+  const song = {
+    "id": "5",
+      "song_name": "Кем я стал",
+      "band_id": "3",
+      "band_name": "DSPD",
+      "albumid": "3",
+      "album_name": "Album 3",
+      "source": "source_path",
+      "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false",
+      "playlists": [
+          "3",
+      ],
+      genreid: "1",
+      genre_name: "Rock",
+      
+  };
+  
   return (
     <Table
       columns={columns}

src/components/PlaylistsBlock.tsx

@@ -22,12 +22,15 @@ export function PlaylistsBlock({playlists}: {playlists: IPlaylist[]}) {
                 navigation
                 pagination={{ clickable: true }}
                 scrollbar={{ draggable: true }}
-                onSlideChange={() => console.log('slide change')}>
+                onSlideChange={() => console.log('slide change')}
+                loop>
                 {playlists.map((p: IPlaylist) => (
                     <SwiperSlide key={p.id}>
-                        <div className="flex overflow-x-scroll rounded bg-slate-300 self-center" style={{scrollSnapType: 'x mandatory', width: '75%', minHeight: 300}}>
+                        <div id="playlists" className="flex overflow-x-scroll rounded bg-slate-300 self-center" style={{scrollSnapType: 'x mandatory', width: '75%', minHeight: 300}}>
-                            <img src={p.cover} alt={p.name} style={{minWidth: 200, height: 'auto', minHeight: 200}} className="rounded" />
+                            <button>
-                            <p className="text-lg">{p.name}</p>
+                                <img src={p.cover} alt={p.name} style={{minWidth: 100, height: 'auto', width: 'auto', minHeight: 100}} className="rounded" />
+                                <p className="text-lg">{p.name}</p>
+                            </button>        
                         </div>
                     </SwiperSlide>
                 ))}

src/components/SongsBlock.tsx

@@ -43,6 +43,7 @@ export function SongsBlock({songs}: {songs: ISong[]}) {
 
   return (
     <div className="flex justify-center items-center bg-slate-300">
+      
       <Table
         className="w-1/2"
         dataSource={songs.map((s: ISong) => ({...s, play: ''}))}

src/models/IModels.ts

@@ -3,7 +3,7 @@ export interface IAlbum {
     name: string;
     cover: string;
     year: string;
-    genres: IGenre[];
+    genres: string[];
 }
 
 export interface IBand {
@@ -12,7 +12,7 @@ export interface IBand {
     city: string;
     country: string;
     years: string;
-    genres: IGenre[];
+    genres: string[];
     description: string;
 }
 
@@ -32,7 +32,7 @@ export interface ISong {
     band_id: string;
     album_name: string;
     genre_name: string;
-    playlists: IPlaylist[];
+    playlists: string[];
 }
 
 export interface IPlaylist {
@@ -40,7 +40,7 @@ export interface IPlaylist {
     name: string;
     cover: string;
     description: string;
-    tracks: ISong[];
+    tracks: string[];
 }
 export interface SongProps {
     song: ISong;