Добавил свайпер + надо решить ошибку в футтере

.gitignore

@@ -11,3 +11,5 @@
 
 # Built Visual Studio Code Extensions
 *.vsix
+
+node_modules

package-lock.json

@@ -22,6 +22,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
+        "swiper": "^11.1.10",
         "typescript": "^4.9.5",
         "use-sound": "^4.0.3",
         "web-vitals": "^2.1.4"
@@ -18871,6 +18872,25 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.10",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.10.tgz",
+      "integrity": "sha512-pAVM6vCb6bumj2B9aSh67l3wP1j5YR8dPQM1YhQKMpnBc33vs+RpyVz6NZYZl/ZopCBSYbbWK5nvESwbmU0QXQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -17,6 +17,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "swiper": "^11.1.10",
     "typescript": "^4.9.5",
     "use-sound": "^4.0.3",
     "web-vitals": "^2.1.4"

src/App.css

@@ -24,6 +24,7 @@
   color: white;
   bottom: 0;
   width: 100%;
+  position: absolute;
 }
 
 /* Добавление градиента к блоку прокрутки */

src/App.tsx

@@ -22,15 +22,15 @@ function App() {
 
   async function fetchData() {
     const responseSongs = await axios.get<ISong[]>('http://localhost:3000/songs');
-    const responseAlbums = await axios.get<IAlbum[]>('http://localhost:3000/albums');
-    const responseGenres = await axios.get<IGenre[]>('http://localhost:3000/genres');
-    const responseBands = await axios.get<IBand[]>('http://localhost:3000/bands');
+    // const responseAlbums = await axios.get<IAlbum[]>('http://localhost:3000/albums');
+    // const responseGenres = await axios.get<IGenre[]>('http://localhost:3000/genres');
+    // const responseBands = await axios.get<IBand[]>('http://localhost:3000/bands');
     const responsePlaylists = await axios.get<IPlaylist[]>('http://localhost:3000/playlists');
 
     setSongs(responseSongs.data);
-    setAlbums(responseAlbums.data);
-    setGenres(responseGenres.data);
-    setBands(responseBands.data);
+    // setAlbums(responseAlbums.data);
+    // setGenres(responseGenres.data);
+    // setBands(responseBands.data);
     setPlaylist(responsePlaylists.data);
   }
 

src/components/CurrentTrack.tsx

@@ -1,23 +1,44 @@
 import React from 'react';
-import { Button } from 'antd';
-import { Grid, Row, Col } from 'antd';
-import PlayCircleOutlined from '@ant-design/icons/PlayCircleOutlined';
+import { Button, Table } from 'antd';
+import { PlayCircleOutlined } from '@ant-design/icons';
 import { ISong, SongProps } from '../models/IModels';
 
-export function CurrentTrack({song}: SongProps) {
+export function CurrentTrack({song}: {song: ISong}) {
+
+  const columns = [
+    {
+      title: 'Play',
+      dataIndex: 'play',
+      key: 'play',
+      width: 50,
+      render: (text: string, song: ISong) => (
+        <img
+          className="w-full h-auto rounded"
+          src={song.cover}
+          alt={song.song_name}
+        />
+      ),
+    },
+    {
+      title: '',
+      dataIndex: 'song_name',
+      key: 'song_name',
+    },
+    {
+      title: '',
+      dataIndex: 'band_name',
+      key: 'band_name',
+    }
+  ];
+
   return (
-    <span className="flex items-center justify-between p-4 border-3 border-gray-300 bg-slate-300 w-full h-10">
-      <Row>
-        <Col span={4}>
-          <Button type="link"><PlayCircleOutlined /></Button>
-        </Col>
-        <Col span={10} className="flex items-center justify-between">
-          <p className="text-md">Current Track</p>
-        </Col>
-        <Col span={10} className="flex items-center justify-between">
-          <p className="text-md">Current Group</p>
-        </Col>
-      </Row>
-    </span>
+    <Table
+      columns={columns}
+      dataSource={[song]}
+      pagination={false}
+      className="w-full bg-slate-300"
+    />
   );
 }
+
+

src/components/Footer.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import { Button } from 'antd';
 import { CurrentTrack } from './CurrentTrack';
-import { ISong, SongProps } from '../models/IModels';
+import { ISong } from '../models/IModels';
 
-export function Footer({song}: SongProps) {
+export function Footer({song}: {song: ISong}) {
   return (
     <footer id="footer" className="bg-gray-600">
       <CurrentTrack song={song} />
       <div className="container mx-auto flex justify-between">
-
-        
-
         <p className="text-lg"> 2022 Music Service</p>
         <ul className="flex">
           <li className="mr-4">

src/components/PlaylistsBlock.tsx

@@ -1,16 +1,42 @@
 import { IPlaylist } from "../models/IModels";
 
+import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+
 export function PlaylistsBlock({playlists}: {playlists: IPlaylist[]}) {
 
     return (
-        <div className="flex overflow-x-scroll rounded bg-slate-300" style={{scrollSnapType: 'x mandatory'}}>
+        <div className="container mx-auto content bg-slate-300">
+            <Swiper
+                // install Swiper modules
+                modules={[Navigation, Pagination, Scrollbar, A11y]}
+                spaceBetween={50}
+                slidesPerView={3}
+                navigation
+                pagination={{ clickable: true }}
+                scrollbar={{ draggable: true }}
+                onSlideChange={() => console.log('slide change')}>
                 {playlists.map((p: IPlaylist) => (
-                <div key={p.id} className="w-1/3 mr-4" style={{scrollSnapAlign: 'start'}}>
-                    <img src={p.cover} alt={p.name} style={{width: 200, height: 'auto'}} className="rounded" />
+                    <SwiperSlide key={p.id}>
+                        <div 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" />
                             <p className="text-lg">{p.name}</p>
                         </div>
+                    </SwiperSlide>
                 ))}
+            </Swiper>
+
+            
         </div>
         
+        
     )
 }
+