diff --git a/data.json b/data.json index b34755d9..e1c883d0 100644 --- a/data.json +++ b/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"}, - {"id": "2", "name": "Playlist 2"} - ] + "1", + "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"}, - {"id": "3", "name": "Playlist 3"} - ] + "1", "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"}, - {"id": "3", "name": "Playlist 3"} - ] + "2", "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"}, - {"id": "2", "name": "Playlist 2"} - ] + "1", "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"}, - {"id": "3", "name": "Playlist 3"} - ] + "1", "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"}, - {"id": "3", "name": "Playlist 3"} - ] + "2", "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" - } ] } \ No newline at end of file diff --git a/src/App.css b/src/App.css index d10c0b97..bab3ae3f 100644 --- a/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index db65c228..c3eee6bf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,6 +41,8 @@ function App() { [] ) + const song = songs[1]; + return (