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 { |
||||
WATCH, |
||||
EVENTS, |
||||
VIDEO |
||||
STATS, |
||||
PLAYERS, |
||||
} |
||||
|
||||
Loading…
Reference in new issue