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;