Ruslan Khayrullin
3 years ago
parent
773dd2dba8
commit
6f694eeb9f
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 229 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 908 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 451 B |
@ -0,0 +1,243 @@ |
|||||||
|
import { |
||||||
|
Table, |
||||||
|
Thead, |
||||||
|
Th, |
||||||
|
Tbody, |
||||||
|
Tr, |
||||||
|
Td, |
||||||
|
PlayerNum, |
||||||
|
ParamShortTitle, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
export const PlayersTable = () => ( |
||||||
|
<Table> |
||||||
|
<Thead> |
||||||
|
<Th /> |
||||||
|
<Th> |
||||||
|
<ParamShortTitle>Min</ParamShortTitle> |
||||||
|
</Th> |
||||||
|
<Th sorted> |
||||||
|
<ParamShortTitle>Pt</ParamShortTitle> |
||||||
|
</Th> |
||||||
|
<Th> |
||||||
|
<ParamShortTitle>Reb</ParamShortTitle> |
||||||
|
</Th> |
||||||
|
<Th> |
||||||
|
<ParamShortTitle>Ass</ParamShortTitle> |
||||||
|
</Th> |
||||||
|
<Th> |
||||||
|
<ParamShortTitle>To</ParamShortTitle> |
||||||
|
</Th> |
||||||
|
</Thead> |
||||||
|
<Tbody> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
<Tr> |
||||||
|
<Td><PlayerNum>57</PlayerNum> Selikhov</Td> |
||||||
|
<Td clickable>97</Td> |
||||||
|
<Td sorted>12</Td> |
||||||
|
<Td>2</Td> |
||||||
|
<Td>1</Td> |
||||||
|
<Td>4</Td> |
||||||
|
</Tr> |
||||||
|
</Tbody> |
||||||
|
</Table> |
||||||
|
) |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
|
||||||
|
import { customScrollbar } from 'features/Common' |
||||||
|
|
||||||
|
export const Table = styled.table` |
||||||
|
width: 100%; |
||||||
|
border-radius: 5px; |
||||||
|
border-collapse: collapse;
|
||||||
|
letter-spacing: -0.078px; |
||||||
|
background-color: #333333; |
||||||
|
table-layout: fixed; |
||||||
|
|
||||||
|
${customScrollbar} |
||||||
|
` |
||||||
|
|
||||||
|
export const Thead = styled.thead` |
||||||
|
height: 45px; |
||||||
|
border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); |
||||||
|
` |
||||||
|
|
||||||
|
type ThProps = { |
||||||
|
sorted?: boolean, |
||||||
|
} |
||||||
|
|
||||||
|
export const Th = styled.th<ThProps>` |
||||||
|
font-size: 11px; |
||||||
|
color: ${({ theme }) => theme.colors.white}; |
||||||
|
text-transform: uppercase; |
||||||
|
|
||||||
|
:first-child { |
||||||
|
width: 115px; |
||||||
|
} |
||||||
|
|
||||||
|
${({ sorted }) => (sorted |
||||||
|
? '' |
||||||
|
: css` |
||||||
|
opacity: 0.5; |
||||||
|
`)}
|
||||||
|
` |
||||||
|
|
||||||
|
export const ParamShortTitle = styled.span`` |
||||||
|
|
||||||
|
export const Tbody = styled.tbody`` |
||||||
|
|
||||||
|
export const Tr = styled.tr` |
||||||
|
height: 45px; |
||||||
|
border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); |
||||||
|
|
||||||
|
:last-child { |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
type TdProps = { |
||||||
|
clickable?: boolean, |
||||||
|
sorted?: boolean, |
||||||
|
} |
||||||
|
|
||||||
|
export const Td = styled.td<TdProps>` |
||||||
|
font-size: 11px; |
||||||
|
text-align: center; |
||||||
|
color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)}; |
||||||
|
|
||||||
|
:first-child { |
||||||
|
padding-left: 13px; |
||||||
|
text-align: left; |
||||||
|
color: ${({ theme }) => theme.colors.white}; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
${({ sorted }) => (sorted |
||||||
|
? css` |
||||||
|
font-weight: bold; |
||||||
|
` |
||||||
|
: '')} |
||||||
|
|
||||||
|
${({ clickable }) => (clickable |
||||||
|
? css` |
||||||
|
cursor: pointer; |
||||||
|
` |
||||||
|
: '')} |
||||||
|
` |
||||||
|
|
||||||
|
export const PlayerNum = styled.span` |
||||||
|
color: rgba(255, 255, 255, 0.5); |
||||||
|
` |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import isEmpty from 'lodash/isEmpty' |
||||||
|
|
||||||
|
import type { Playlists, PlaylistOption } from 'features/MatchPage/types' |
||||||
|
import type { MatchInfo } from 'requests' |
||||||
|
|
||||||
|
import { PlayersPlaylists } from '../PlayersPlaylists' |
||||||
|
|
||||||
|
type Props = { |
||||||
|
onSelect: (option: PlaylistOption) => void, |
||||||
|
playlists: Playlists, |
||||||
|
profile: MatchInfo, |
||||||
|
selectedPlaylist?: PlaylistOption, |
||||||
|
} |
||||||
|
|
||||||
|
export const TabPlayers = ({ |
||||||
|
onSelect, |
||||||
|
playlists, |
||||||
|
profile, |
||||||
|
selectedPlaylist, |
||||||
|
}: Props) => { |
||||||
|
if (isEmpty(playlists.players.team1)) return null |
||||||
|
|
||||||
|
return ( |
||||||
|
<PlayersPlaylists |
||||||
|
profile={profile} |
||||||
|
players={playlists.players} |
||||||
|
selectedMathPlaylist={selectedPlaylist} |
||||||
|
onSelect={onSelect} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export enum Tabs { |
||||||
|
TEAMS, |
||||||
|
TEAM1, |
||||||
|
TEAM2, |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import { Tooltip } from 'features/Tooltip' |
||||||
|
|
||||||
|
import { PlayersTable } from '../PlayersTable' |
||||||
|
import { TeamsStats } from '../TeamsStats' |
||||||
|
|
||||||
|
import { |
||||||
|
Container, |
||||||
|
Header, |
||||||
|
TabList, |
||||||
|
Tab, |
||||||
|
Switch, |
||||||
|
SwitchTitle, |
||||||
|
SwitchButton, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
export const TabStats = () => ( |
||||||
|
<Container> |
||||||
|
<Header> |
||||||
|
<TabList> |
||||||
|
<Tab selected>Teams</Tab> |
||||||
|
<Tab>DIN</Tab> |
||||||
|
<Tab>SPA</Tab> |
||||||
|
</TabList> |
||||||
|
<Switch> |
||||||
|
<SwitchTitle>Final Stats</SwitchTitle> |
||||||
|
<SwitchButton> |
||||||
|
<Tooltip lexic='others' /> |
||||||
|
</SwitchButton> |
||||||
|
</Switch> |
||||||
|
</Header> |
||||||
|
<PlayersTable /> |
||||||
|
{/* <TeamsStats /> */} |
||||||
|
</Container> |
||||||
|
) |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
|
||||||
|
import { TooltipWrapper } from 'features/Tooltip' |
||||||
|
|
||||||
|
export const Container = styled.div`` |
||||||
|
|
||||||
|
export const Header = styled.div` |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 23px; |
||||||
|
` |
||||||
|
|
||||||
|
export const TabList = styled.div.attrs({ role: 'tablist' })` |
||||||
|
display: flex; |
||||||
|
` |
||||||
|
|
||||||
|
type TabProps = { |
||||||
|
selected?: boolean, |
||||||
|
} |
||||||
|
|
||||||
|
export const Tab = styled.div.attrs(({ selected }: TabProps) => ({ |
||||||
|
'aria-pressed': selected, |
||||||
|
role: 'tab', |
||||||
|
}))<TabProps>` |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 0 15px 10px; |
||||||
|
font-size: 12px; |
||||||
|
color: ${({ theme }) => theme.colors.white}; |
||||||
|
opacity: ${({ selected }) => (selected ? '1' : '0.4')}; |
||||||
|
cursor: pointer; |
||||||
|
border-bottom: 2px solid transparent; |
||||||
|
|
||||||
|
|
||||||
|
${({ selected, theme }) => (selected |
||||||
|
? css` |
||||||
|
border-color: ${theme.colors.white}; |
||||||
|
` |
||||||
|
: '')} |
||||||
|
` |
||||||
|
|
||||||
|
export const Switch = styled.div` |
||||||
|
display: flex; |
||||||
|
` |
||||||
|
|
||||||
|
export const SwitchTitle = styled.span` |
||||||
|
font-size: 12px; |
||||||
|
color: ${({ theme }) => theme.colors.white}; |
||||||
|
` |
||||||
|
|
||||||
|
export const SwitchButton = styled.button` |
||||||
|
position: relative; |
||||||
|
width: 20px; |
||||||
|
height: 7px; |
||||||
|
margin-left: 5px; |
||||||
|
margin-top: 5px; |
||||||
|
border-radius: 2px; |
||||||
|
border: none; |
||||||
|
border: 1px solid ${({ theme }) => theme.colors.white}; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
${TooltipWrapper} { |
||||||
|
left: auto; |
||||||
|
right: 0; |
||||||
|
padding: 2px 10px; |
||||||
|
border-radius: 6px; |
||||||
|
transform: none; |
||||||
|
|
||||||
|
::before { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:hover { |
||||||
|
${TooltipWrapper} { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
${({ theme }) => (true // Позже будет добавлен пропс
|
||||||
|
? css` |
||||||
|
background-image: linear-gradient( |
||||||
|
to right, |
||||||
|
${theme.colors.white} 33.333%, |
||||||
|
${theme.colors.black} 33.333%, |
||||||
|
${theme.colors.black} 66.666%, |
||||||
|
${theme.colors.white} 66.666%, |
||||||
|
${theme.colors.white} 72%, |
||||||
|
${theme.colors.black} 72%, |
||||||
|
${theme.colors.black} 100%) |
||||||
|
` |
||||||
|
: css` |
||||||
|
border-color: transparent; |
||||||
|
background-image: linear-gradient( |
||||||
|
to right, |
||||||
|
${theme.colors.white} 33.333%, |
||||||
|
${theme.colors.black} 33.333%, |
||||||
|
${theme.colors.black} 38%, |
||||||
|
${theme.colors.white} 38%, |
||||||
|
${theme.colors.white} 66.666%, |
||||||
|
${theme.colors.black} 66.666%, |
||||||
|
${theme.colors.black} 72%, |
||||||
|
${theme.colors.white} 72%, |
||||||
|
${theme.colors.white} 100%) |
||||||
|
` |
||||||
|
)} |
||||||
|
` |
||||||
@ -0,0 +1,276 @@ |
|||||||
|
import { |
||||||
|
Container, |
||||||
|
Row, |
||||||
|
TeamShortName, |
||||||
|
ParamValueContainer, |
||||||
|
ParamValue, |
||||||
|
ParamTitle, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
export const TeamsStats = () => ( |
||||||
|
<Container> |
||||||
|
<Row> |
||||||
|
<TeamShortName>DIN</TeamShortName> |
||||||
|
<TeamShortName>SPA</TeamShortName> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue clickable>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue clickable>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<ParamValueContainer> |
||||||
|
<ParamValue>90</ParamValue> |
||||||
|
</ParamValueContainer> |
||||||
|
<ParamTitle>Points</ParamTitle> |
||||||
|
<ParamValue>123</ParamValue> |
||||||
|
</Row> |
||||||
|
</Container> |
||||||
|
) |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
|
||||||
|
import { customScrollbar } from 'features/Common' |
||||||
|
|
||||||
|
export const Container = styled.div` |
||||||
|
width: 100%; |
||||||
|
font-size: 11px; |
||||||
|
background-color: #333333; |
||||||
|
|
||||||
|
${customScrollbar} |
||||||
|
` |
||||||
|
|
||||||
|
export const TeamShortName = styled.span` |
||||||
|
color: ${({ theme }) => theme.colors.white}; |
||||||
|
letter-spacing: -0.078px; |
||||||
|
text-transform: uppercase; |
||||||
|
font-weight: 600; |
||||||
|
opacity: 0.5; |
||||||
|
` |
||||||
|
|
||||||
|
export const Row = styled.div` |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
height: 45px; |
||||||
|
padding: 0 12px; |
||||||
|
border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); |
||||||
|
|
||||||
|
:last-child { |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
export const ParamValueContainer = styled.div`` |
||||||
|
|
||||||
|
type TParamValue = { |
||||||
|
clickable?: boolean, |
||||||
|
} |
||||||
|
|
||||||
|
export const ParamValue = styled.span<TParamValue>` |
||||||
|
color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)}; |
||||||
|
|
||||||
|
${({ clickable }) => (clickable |
||||||
|
? css` |
||||||
|
cursor: pointer; |
||||||
|
` |
||||||
|
: '')} |
||||||
|
` |
||||||
|
|
||||||
|
export const ParamTitle = styled.span` |
||||||
|
color: ${({ theme }) => theme.colors.white}; |
||||||
|
letter-spacing: -0.078px; |
||||||
|
text-transform: uppercase; |
||||||
|
font-weight: 600; |
||||||
|
opacity: 0.5; |
||||||
|
` |
||||||
@ -1,5 +1,6 @@ |
|||||||
export enum Tabs { |
export enum Tabs { |
||||||
WATCH, |
WATCH, |
||||||
EVENTS, |
EVENTS, |
||||||
VIDEO |
STATS, |
||||||
|
PLAYERS, |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue