You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.0 KiB
85 lines
2.0 KiB
import type { Events, MatchInfo } from 'requests'
|
|
|
|
import type { PlaylistOption, Playlists } from 'features/MatchPage/types'
|
|
import { MATCH_SIDE_PLAYLIST_WIDTH } from 'config'
|
|
import { Tab, TabsGroup } from 'features/Common'
|
|
import { T9n } from 'features/T9n'
|
|
|
|
import { Tabs } from './config'
|
|
import { TabEvents } from './components/TabEvents'
|
|
import { TabWatch } from './components/TabWatch'
|
|
import { useMatchSidePlaylists } from './hooks'
|
|
import {
|
|
Wrapper,
|
|
TabsWrapper,
|
|
Container,
|
|
} from './styled'
|
|
|
|
const tabPanes = {
|
|
[Tabs.WATCH]: TabWatch,
|
|
[Tabs.EVENTS]: TabEvents,
|
|
[Tabs.LANGUAGES]: () => null,
|
|
}
|
|
|
|
type Props = {
|
|
events: Events,
|
|
onSelect: (option: PlaylistOption) => void,
|
|
playlists: Playlists,
|
|
profile: MatchInfo,
|
|
selectedPlaylist?: PlaylistOption,
|
|
}
|
|
|
|
export const MatchSidePlaylists = ({
|
|
events,
|
|
onSelect,
|
|
playlists,
|
|
profile,
|
|
selectedPlaylist,
|
|
}: Props) => {
|
|
const {
|
|
onTabClick,
|
|
selectedTab,
|
|
} = useMatchSidePlaylists()
|
|
|
|
const TabPane = tabPanes[selectedTab]
|
|
|
|
return (
|
|
<Wrapper>
|
|
<TabsWrapper>
|
|
<TabsGroup buttons={3}>
|
|
<Tab
|
|
width={MATCH_SIDE_PLAYLIST_WIDTH[0]}
|
|
selected={selectedTab === Tabs.WATCH}
|
|
onClick={() => onTabClick(Tabs.WATCH)}
|
|
>
|
|
<T9n t='watch' />
|
|
</Tab>
|
|
<Tab
|
|
width={MATCH_SIDE_PLAYLIST_WIDTH[1]}
|
|
selected={selectedTab === Tabs.EVENTS}
|
|
onClick={() => onTabClick(Tabs.EVENTS)}
|
|
>
|
|
<T9n t='actions' />
|
|
</Tab>
|
|
<Tab
|
|
disabled
|
|
width={MATCH_SIDE_PLAYLIST_WIDTH[2]}
|
|
selected={selectedTab === Tabs.LANGUAGES}
|
|
onClick={() => onTabClick(Tabs.LANGUAGES)}
|
|
>
|
|
<T9n t='commentators' />
|
|
</Tab>
|
|
</TabsGroup>
|
|
</TabsWrapper>
|
|
<Container>
|
|
<TabPane
|
|
events={events}
|
|
onSelect={onSelect}
|
|
playlists={playlists}
|
|
profile={profile}
|
|
selectedPlaylist={selectedPlaylist}
|
|
/>
|
|
</Container>
|
|
</Wrapper>
|
|
)
|
|
}
|
|
|