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.
101 lines
2.3 KiB
101 lines
2.3 KiB
import type { Events, MatchInfo } from 'requests'
|
|
|
|
import type {
|
|
PlaylistOption,
|
|
Playlists,
|
|
TournamentData,
|
|
} from 'features/MatchPage/types'
|
|
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 { TabVideo } from './components/TabVideo'
|
|
import { useMatchSidePlaylists } from './hooks'
|
|
import {
|
|
Wrapper,
|
|
TabsWrapper,
|
|
Container,
|
|
} from './styled'
|
|
|
|
const tabPanes = {
|
|
[Tabs.WATCH]: TabWatch,
|
|
[Tabs.EVENTS]: TabEvents,
|
|
[Tabs.VIDEO]: TabVideo,
|
|
}
|
|
|
|
type Props = {
|
|
events: Events,
|
|
onSelect: (option: PlaylistOption) => void,
|
|
playlists: Playlists,
|
|
profile: MatchInfo,
|
|
selectedPlaylist?: PlaylistOption,
|
|
tournamentData: TournamentData,
|
|
}
|
|
|
|
export const MatchSidePlaylists = ({
|
|
events,
|
|
onSelect,
|
|
playlists,
|
|
profile,
|
|
selectedPlaylist,
|
|
tournamentData,
|
|
}: Props) => {
|
|
const {
|
|
isEventTabVisible,
|
|
isVideoTabVisible,
|
|
isWatchTabVisible,
|
|
onTabClick,
|
|
selectedTab,
|
|
} = useMatchSidePlaylists({
|
|
events,
|
|
playlists,
|
|
tournamentData,
|
|
})
|
|
|
|
const TabPane = tabPanes[selectedTab]
|
|
|
|
return (
|
|
<Wrapper>
|
|
<TabsWrapper>
|
|
<TabsGroup>
|
|
{isWatchTabVisible ? (
|
|
<Tab
|
|
selected={selectedTab === Tabs.WATCH}
|
|
onClick={() => onTabClick(Tabs.WATCH)}
|
|
>
|
|
<T9n t='watch' />
|
|
</Tab>
|
|
) : null}
|
|
{isEventTabVisible ? (
|
|
<Tab
|
|
selected={selectedTab === Tabs.EVENTS}
|
|
onClick={() => onTabClick(Tabs.EVENTS)}
|
|
>
|
|
<T9n t='actions' />
|
|
</Tab>
|
|
) : null}
|
|
{isVideoTabVisible ? (
|
|
<Tab
|
|
selected={selectedTab === Tabs.VIDEO}
|
|
onClick={() => onTabClick(Tabs.VIDEO)}
|
|
>
|
|
<T9n t='video' />
|
|
</Tab>
|
|
) : null}
|
|
</TabsGroup>
|
|
</TabsWrapper>
|
|
<Container>
|
|
<TabPane
|
|
tournamentData={tournamentData}
|
|
events={events}
|
|
onSelect={onSelect}
|
|
playlists={playlists}
|
|
profile={profile}
|
|
selectedPlaylist={selectedPlaylist}
|
|
/>
|
|
</Container>
|
|
</Wrapper>
|
|
)
|
|
}
|
|
|