diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx index d04f324c..b686b11a 100644 --- a/src/features/MatchPage/components/LiveMatch/index.tsx +++ b/src/features/MatchPage/components/LiveMatch/index.tsx @@ -1,9 +1,12 @@ +import { Fragment } from 'react' + import type { MatchInfo } from 'requests' import { StreamPlayer } from 'features/StreamPlayer' import { useLiveMatch } from './hooks' import { MatchProfileCard } from '../MatchProfileCard' +import { LiveMatchSidePlaylists } from '../LiveMatchSidePlaylists' import { Container } from '../../styled' type Props = { @@ -19,14 +22,17 @@ export const LiveMatch = ({ profile }: Props) => { } = useLiveMatch() return ( - - - - + + + + + + + ) } diff --git a/src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx b/src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx new file mode 100644 index 00000000..3cdd1409 --- /dev/null +++ b/src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx @@ -0,0 +1,27 @@ +import type { MatchPlaylistOption } from 'features/MatchPage/types' +import { PlaylistTypes } from 'features/MatchPage/types' +import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists' + +import { Wrapper, Container } from 'features/MatchSidePlaylists/styled' +import { MatchPlaylists } from 'features/MatchSidePlaylists/components/MatchPlaylists' + +const fullGamePlaylist: MatchPlaylistOption = { + data: [], + id: FULL_GAME_KEY, + lexic: FULL_GAME_KEY, + type: PlaylistTypes.MATCH, +} + +const selectedPlaylist = fullGamePlaylist +const playlists = [fullGamePlaylist] + +export const LiveMatchSidePlaylists = () => ( + + + + + +) diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx index a888ada8..f404c1a3 100644 --- a/src/features/MatchPage/styled.tsx +++ b/src/features/MatchPage/styled.tsx @@ -16,17 +16,12 @@ export const Wrapper = styled.div` } ` -type ContainerProps = { - marginRight?: number, -} - -export const Container = styled.div` +export const Container = styled.div` max-width: 2090px; max-height: 896px; display: flex; flex-direction: column; flex-grow: 1; - margin-right: ${({ marginRight = 0 }) => `${marginRight}px`}; @media ${devices.laptop} { max-width: 80%; diff --git a/src/features/MatchPage/types.tsx b/src/features/MatchPage/types.tsx index 7d9f8788..cbea283d 100644 --- a/src/features/MatchPage/types.tsx +++ b/src/features/MatchPage/types.tsx @@ -10,7 +10,7 @@ export type MatchPlaylistOption = { data: Episodes, duration?: number, id: string, - lexic: number, + lexic: number | string, type: PlaylistTypes.MATCH, } diff --git a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx index c4e0cad5..810bc0e7 100644 --- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx @@ -8,38 +8,39 @@ import { T9n } from 'features/T9n' import { isEqual } from 'features/MatchSidePlaylists' import { PlayButton } from '../PlayButton' -import { Item } from '../../styled' type Props = { - onSelect: (selectedMathPlaylist: PlaylistOption) => void, - playlists?: MatchPlaylistOptions, + onSelect?: (selectedMathPlaylist: PlaylistOption) => void, + playlists: MatchPlaylistOptions, selectedMathPlaylist?: PlaylistOption, } const List = styled.ul`` -export const MatchPlaylists = (props: Props) => { - const { - onSelect, - playlists, - selectedMathPlaylist, - } = props - - return ( - - { - map(playlists, (playlist) => ( - - onSelect(playlist)} - > - - - - )) - } - - ) -} +const Item = styled.li` + margin-bottom: 10px; + width: 100%; + height: 50px; +` + +export const MatchPlaylists = ({ + onSelect, + playlists, + selectedMathPlaylist, +}: Props) => ( + + { + map(playlists, (playlist) => ( + + onSelect?.(playlist)} + > + + + + )) + } + +) diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx index 7d304358..02c4f9e3 100644 --- a/src/features/MatchSidePlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/styled.tsx @@ -50,12 +50,6 @@ export const Button = styled.button` )} ` -export const Item = styled.li` - margin-bottom: 10px; - width: 100%; - height: 50px; -` - export const Title = styled.span` font-weight: 500; font-size: 20px;