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/ProfileHeader/index.tsx

84 lines
1.7 KiB

import type { ReactNode } from 'react'
import { Link } from 'react-router-dom'
import {
PAGES,
ProfileTypes,
} from 'config'
import { client } from 'config/clients'
import { isMobileDevice } from 'config/userAgent'
import { Menu } from 'features/Menu'
import { Search } from 'features/Search'
import { ScoreSwitch } from 'features/MatchSwitches'
import { usePageParams } from 'hooks/usePageParams'
import {
HeaderStyled,
HeaderGroup,
HeaderLogo,
Position,
} from './styled'
type Props = {
children?: ReactNode,
color?: string,
headerImage?: string | null,
height?: number,
profileId?: number,
}
const profileWithImage = {
316: 'Ligue 1',
5704: 'NSDF Futsal Invitation Championship',
}
export const ProfileHeader = ({
children,
color: headerColor,
headerImage,
height,
profileId,
}: Props) => {
const {
profileType,
sportType,
} = usePageParams()
// @ts-ignore
const imageHeader = Boolean(profileWithImage[profileId])
&& sportType === 1
&& profileType === ProfileTypes.TOURNAMENTS ? `/images/${profileId}` : headerImage
return (
<HeaderStyled
headerImage={imageHeader}
color={headerColor}
height={height}
>
<Position
top={client.styles.logoTop}
left={client.styles.logoLeft}
>
<HeaderGroup>
<Link to={PAGES.home} id='general_main_page'>
<HeaderLogo />
</Link>
{client.showSearch && <Search />}
</HeaderGroup>
</Position>
{children}
<Position top={isMobileDevice ? client.styles.logoTop : undefined} right={0.71}>
<HeaderGroup>
{!isMobileDevice ? <ScoreSwitch /> : null}
<Menu />
</HeaderGroup>
</Position>
</HeaderStyled>
)
}