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

This commit is contained in:
Аришина) 2024-08-24 15:57:28 +04:00
parent 1891c9e7a1
commit b96ce0d291
8 changed files with 103 additions and 35 deletions

2
.gitignore vendored
View File

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

20
package-lock.json generated
View File

@ -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",

View File

@ -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"

View File

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

View File

@ -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);
}

View File

@ -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"
/>
);
}

View File

@ -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">

View File

@ -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'}}>
{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" />
<p className="text-lg">{p.name}</p>
</div>
))}
<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) => (
<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>
)
}