Дектерев Андрей
4 years ago
committed by
Макситалиев Мирлан
parent
e14ec8443d
commit
9ef3bf05e2
|
After Width: | Height: | Size: 624 B |
@ -0,0 +1,87 @@ |
||||
import { format } from 'date-fns' |
||||
|
||||
import type { MatchInfo } from 'requests/getMatchInfo' |
||||
|
||||
import { Name } from 'features/Name' |
||||
import { SportIcon } from 'features/SportIcon' |
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { parseDate } from 'helpers/parseDate' |
||||
|
||||
import { ProfileTypes } from 'config' |
||||
|
||||
import { usePageParams } from 'hooks/usePageParams' |
||||
import { |
||||
CountryFlag, |
||||
Description, |
||||
MatchDate, |
||||
StyledLink, |
||||
Title, |
||||
Tournament, |
||||
Views, |
||||
} from './styled' |
||||
|
||||
type Props = { |
||||
profile: MatchInfo, |
||||
} |
||||
|
||||
export const MatchDescription = ({ profile }: Props) => { |
||||
const { sportType } = usePageParams() |
||||
|
||||
if (!profile) return <Description /> |
||||
|
||||
const { |
||||
country_id, |
||||
date, |
||||
live, |
||||
team1, |
||||
team2, |
||||
tournament, |
||||
} = profile |
||||
|
||||
const localDate = format(parseDate(date), live ? 'HH:mm' : 'd.MM.Y') |
||||
|
||||
return ( |
||||
<Description> |
||||
<Title> |
||||
<StyledLink |
||||
id={team1.id} |
||||
profileType={ProfileTypes.TEAMS} |
||||
sportType={sportType} |
||||
> |
||||
<Name nameObj={team1} /> |
||||
</StyledLink> |
||||
— |
||||
<StyledLink |
||||
id={team2.id} |
||||
profileType={ProfileTypes.TEAMS} |
||||
sportType={sportType} |
||||
> |
||||
<Name nameObj={team2} /> |
||||
</StyledLink> |
||||
{live ? '\u00a0|\u00a0LIVE STREAM' : ''} |
||||
</Title> |
||||
<Tournament> |
||||
<SportIcon sport={sportType} /> |
||||
<CountryFlag |
||||
src={`https://instatscout.com/images/flags/48/${country_id}.png`} |
||||
/> |
||||
<StyledLink |
||||
id={tournament.id} |
||||
profileType={ProfileTypes.TOURNAMENTS} |
||||
sportType={sportType} |
||||
> |
||||
<Name nameObj={tournament} /> |
||||
</StyledLink> |
||||
</Tournament> |
||||
<Views> |
||||
{ |
||||
live |
||||
? <T9n t='started_streaming_at' /> |
||||
: <T9n t='streamed_live_on' /> |
||||
} |
||||
<MatchDate>{localDate}</MatchDate> |
||||
</Views> |
||||
</Description> |
||||
) |
||||
} |
||||
@ -0,0 +1,63 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { ProfileLink } from 'features/ProfileLink' |
||||
|
||||
export const Description = styled.div` |
||||
margin: 20px 0; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
@media (orientation: portrait) { |
||||
padding-left: 14px; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const StyledLink = styled(ProfileLink)` |
||||
display: flex; |
||||
align-items: center; |
||||
color: rgba(255, 255, 255, 0.7); |
||||
|
||||
&:hover { |
||||
color: white; |
||||
text-decoration: underline; |
||||
} |
||||
` |
||||
|
||||
export const Title = styled.div` |
||||
display: flex; |
||||
flex-direction: row; |
||||
color: #ffffff; |
||||
font-weight: 500; |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
margin-bottom: 10px; |
||||
> * { |
||||
color: #ffffff; |
||||
} |
||||
` |
||||
|
||||
export const Tournament = styled.span` |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
font-size: 14px; |
||||
line-height: 16px; |
||||
color: rgba(255, 255, 255, 0.7); |
||||
margin-bottom: 5px; |
||||
` |
||||
|
||||
export const CountryFlag = styled.img` |
||||
height: 12px; |
||||
margin: 0 6px; |
||||
` |
||||
|
||||
export const Views = styled(Tournament)` |
||||
> * { |
||||
margin-right: 5px; |
||||
} |
||||
` |
||||
|
||||
export const MatchDate = styled.span`` |
||||
Loading…
Reference in new issue