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.
50 lines
1.0 KiB
50 lines
1.0 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 'features/SportIcon'
|
|
|
|
const Wrapper = styled.div`
|
|
width: 100%;
|
|
max-width: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
`
|
|
|
|
const StyledName = styled(Name)`
|
|
${isMobileDevice
|
|
? css`
|
|
@media (max-width: 650px){
|
|
font-size: 10px;
|
|
}
|
|
|
|
@media (orientation: landscape){
|
|
font-size: 12px;
|
|
}
|
|
`
|
|
: ''}
|
|
`
|
|
|
|
type Props = {
|
|
tournament: Tournament,
|
|
}
|
|
|
|
export const TournamentInfo = ({ tournament }: Props) => (
|
|
<Wrapper>
|
|
<StyledName nameObj={tournament} />
|
|
<ItemInfo>
|
|
<SportIcon sport={tournament.sport} />
|
|
<Flag src={`https://instatscout.com/images/flags/48/${tournament.country.id}.png`} />
|
|
<TeamOrCountry nameObj={tournament.country} />
|
|
</ItemInfo>
|
|
</Wrapper>
|
|
)
|
|
|