43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
|
||
|
|
import { Tabs } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
import { PlaylistsBlock } from './PlaylistsBlock';
|
||
|
|
import { IAlbum, IGenre, IPlaylist, ISong } from '../models/IModels';
|
||
|
|
import { SongsBlock } from './SongsBlock';
|
||
|
|
import { FullPlaylistBlock } from './FullPlaylistBlock';
|
||
|
|
|
||
|
|
interface MenuBlockProps {
|
||
|
|
playlists?: IPlaylist[],
|
||
|
|
songs?: ISong[],
|
||
|
|
albums?: IAlbum[],
|
||
|
|
genres?: IGenre[],
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MenuBlock({playlists, songs, albums, genres}: MenuBlockProps) {
|
||
|
|
const chartTab = {
|
||
|
|
label: 'Чарт',
|
||
|
|
key: 'Chart',
|
||
|
|
children: songs? <SongsBlock songs={songs}/> : null
|
||
|
|
};
|
||
|
|
const playlistsTab = {
|
||
|
|
label: 'Плейлисты',
|
||
|
|
key: 'Playlists',
|
||
|
|
children: playlists && genres ? <FullPlaylistBlock {...{playlists, genres}}/> : null
|
||
|
|
};
|
||
|
|
const newSongsTab = {
|
||
|
|
label: 'Новинки',
|
||
|
|
key: 'New',
|
||
|
|
children: songs? <SongsBlock songs={songs}/> : null
|
||
|
|
};
|
||
|
|
const tabs = [chartTab, playlistsTab, newSongsTab];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container flex mx-auto items-center justify-center bg-transparent">
|
||
|
|
<Tabs
|
||
|
|
defaultActiveKey="Chart"
|
||
|
|
items={tabs}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
);
|
||
|
|
}
|