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.
 
 
 
 
spa_instat_tv/src/features/ItemsList/index.tsx

67 lines
1.5 KiB

import { Fragment } from 'react'
import map from 'lodash/map'
import { SportTypes, ProfileTypes } from 'config'
import { isMobileDevice } from 'config/userAgent'
import { Gender } from 'requests'
import type { ObjectWithName } from 'features/Name'
import { SportIcon } from 'components/SportIcon/SportIcon'
import {
Item,
ItemInfo,
Name,
Flag,
StyledLink,
TeamOrCountry,
Wrapper,
} from './styled'
type SearchItemsListProps = {
className?: string,
close?: () => void,
list: Array<{
additionalInfo?: ObjectWithName & {
id?: number,
},
gender?: Gender,
id: number,
name_eng: string,
name_rus: string,
profileType: ProfileTypes,
sport: SportTypes,
}>,
}
export const ItemsList = ({
className,
close,
list,
}: SearchItemsListProps) => (
<Wrapper className={className}>
{map(list, (item) => (
<Item key={item.id}>
<StyledLink
id={item.id}
sportType={item.sport}
profileType={item.profileType}
onClick={close}
>
<Name nameObj={item} />
<ItemInfo>
<SportIcon size={isMobileDevice ? 10 : '0.65rem'} sport={item.sport} />
{item.additionalInfo && (
<Fragment>
<Flag src={`https://cf-aws.insports.tv/media/flags/${item.additionalInfo.id}.png`} />
<TeamOrCountry nameObj={item.additionalInfo} />
</Fragment>
)}
</ItemInfo>
</StyledLink>
</Item>
))}
</Wrapper>
)