60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
|
|
import { Tabs } from 'antd';
|
|
import React from 'react';
|
|
import { PlaylistsBlock } from '../menuComponents/PlaylistsBlock';
|
|
import { IAlbum, IGenre, IPlaylist, ISong } from '../../models/IModels';
|
|
import { NewSongsBlock } from '../menuComponents/NewSongsBlock';
|
|
import { FullPlaylistBlock } from '../menuComponents/FullPlaylistBlock';
|
|
import { width } from '@mui/system';
|
|
import TabPane from 'antd/es/tabs/TabPane';
|
|
import { ChartSongsBlock } from '../menuComponents/ChartSongsBlock';
|
|
|
|
interface MenuBlockProps {
|
|
playlists?: IPlaylist[],
|
|
songs?: ISong[],
|
|
albums?: IAlbum[],
|
|
genres?: IGenre[],
|
|
}
|
|
|
|
export function MenuBlock({playlists, songs, albums, genres}: MenuBlockProps) {
|
|
const newSongsTab = {
|
|
label: 'Новинки',
|
|
key: 'New',
|
|
children: songs? <NewSongsBlock /> : null
|
|
};
|
|
const playlistsTab = {
|
|
label: 'Плейлисты',
|
|
key: 'Playlists',
|
|
children: playlists && genres ? <FullPlaylistBlock playlists={playlists} genres={genres}/> : null
|
|
};
|
|
|
|
const chartTab = {
|
|
label: 'Чарт',
|
|
key: 'Chart',
|
|
children: songs? <ChartSongsBlock /> : null
|
|
};
|
|
|
|
const recTab = {
|
|
label: 'Рекомендации',
|
|
key: 'Recomendations',
|
|
children: songs? <NewSongsBlock /> : null
|
|
};
|
|
const tabs = [recTab, newSongsTab, chartTab, playlistsTab];
|
|
|
|
return (
|
|
<div className="flex" style={{display: 'flex', alignSelf: 'flex-start', width: 'fit-content'}}>
|
|
<Tabs
|
|
|
|
type="line"
|
|
className='container flex justify-start menu-block'
|
|
defaultActiveKey="New"
|
|
items={tabs}
|
|
style={{padding: '1%'}}
|
|
>
|
|
</Tabs>
|
|
</div>
|
|
|
|
|
|
);
|
|
}
|