PromoCursed/src/components/MenuBlock.tsx

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';
import { width } from '@mui/system';

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="flex mx-auto" style={{display: 'block', width: '75%', 'background': 'linear-gradient(to right, #f0f4f8, #e6e9f0)'}}>
            <Tabs
                style={{width: '100%'}}
                type="card"
                className='container flex mx-auto  items-center justify-center'
                defaultActiveKey="Chart"
                items={tabs}
            />
        </div>
        
        
    );
}