You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.2 KiB
58 lines
1.2 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import type { Tournament } from 'requests/getSportTournaments'
|
|
|
|
import {
|
|
ItemInfo,
|
|
Name,
|
|
Flag,
|
|
TeamOrCountry,
|
|
} from 'features/ItemsList/styled'
|
|
import { SportIcon } from 'components/SportIcon/SportIcon'
|
|
|
|
const Wrapper = styled.div`
|
|
width: 100%;
|
|
max-width: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
`
|
|
|
|
const StyledName = styled(Name)`
|
|
font-size: 14px;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
@media (max-width: 650px){
|
|
font-size: 10px;
|
|
}
|
|
|
|
@media (orientation: landscape){
|
|
font-size: 12px;
|
|
}
|
|
`
|
|
: ''}
|
|
`
|
|
|
|
type Props = {
|
|
isIcon?: boolean,
|
|
prefix?: string,
|
|
tournament: Tournament,
|
|
}
|
|
|
|
export const TournamentInfo = ({
|
|
isIcon,
|
|
prefix,
|
|
tournament,
|
|
}: Props) => (
|
|
<Wrapper>
|
|
<StyledName nameObj={tournament} className='title' prefix={prefix} />
|
|
<ItemInfo>
|
|
{isIcon && <SportIcon size={isMobileDevice ? 10 : '0.65rem'} sport={tournament.sport} />}
|
|
<Flag src={`https://cf-aws.insports.tv/media/flags/${tournament.country.id}.png`} />
|
|
<TeamOrCountry nameObj={tournament.country} />
|
|
</ItemInfo>
|
|
</Wrapper>
|
|
)
|
|
|