style(#2317): change style for home page in mobile devices
Andrei Dekterev
4 years ago
committed by
Andrei Dekterev
parent
3df8105d58
commit
ad4a33c812
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,66 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
import { SportTypes } from 'config' |
||||
import { getSportLexic } from 'helpers' |
||||
|
||||
import { Icon } from 'features/Icon' |
||||
|
||||
const IconWrap = styled.div` |
||||
display: flex; |
||||
height: 10px; |
||||
min-width: 10px; |
||||
color: white; |
||||
align-items: center; |
||||
` |
||||
|
||||
type Props = { |
||||
fill?: string, |
||||
size?: number, |
||||
sport: SportTypes, |
||||
} |
||||
|
||||
const sportIcons = { |
||||
basketball: { |
||||
color: '#f1903b', |
||||
icon: 'Basketball', |
||||
}, |
||||
football: { |
||||
color: '#5CDD86', |
||||
icon: 'Football', |
||||
}, |
||||
handball: { |
||||
color: '#F6BE4F', |
||||
icon: 'Handball', |
||||
}, |
||||
hockey: { |
||||
color: '#5eb2ff', |
||||
icon: 'Hockey', |
||||
}, |
||||
streetball: { |
||||
color: '#f1903b', |
||||
icon: 'Basketball', |
||||
}, |
||||
volleyball: { |
||||
color: '#2D8B8A', |
||||
icon: 'Volleyball', |
||||
}, |
||||
} |
||||
|
||||
export const SportIcon = ({ |
||||
fill, |
||||
size, |
||||
sport, |
||||
}: Props) => { |
||||
const sportType = getSportLexic(sport) |
||||
const IconSport = sportIcons[sportType].icon |
||||
|
||||
return ( |
||||
<IconWrap> |
||||
<Icon |
||||
refIcon={IconSport} |
||||
color={fill || sportIcons[sportType].color} |
||||
size={size || 10} |
||||
/> |
||||
</IconWrap> |
||||
) |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
import { Link } from 'react-router-dom' |
||||
|
||||
import { PAGES } from 'config/pages' |
||||
|
||||
import { Search } from 'features/Search' |
||||
import { Menu } from 'features/Menu' |
||||
|
||||
import { HeaderGroup, HeaderLogo } from './styled' |
||||
|
||||
export const HeaderMenu = () => ( |
||||
<HeaderGroup> |
||||
<Search /> |
||||
<Link to={PAGES.home}> |
||||
<HeaderLogo /> |
||||
</Link> |
||||
<Menu /> |
||||
</HeaderGroup> |
||||
) |
||||
@ -0,0 +1,46 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { client } from 'config/clients' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { Logo } from 'features/Logo' |
||||
|
||||
type Props = { |
||||
height?: number, |
||||
marginTop?: number, |
||||
} |
||||
|
||||
export const HeaderGroup = styled.div<Props>` |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
${({ height }) => (height ? `height: ${height}rem` : '')}; |
||||
${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')}; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
position: relative; |
||||
justify-content: space-between; |
||||
|
||||
:only-child { |
||||
flex-basis: 100px; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const HeaderLogo = styled(Logo)` |
||||
${({ isMatchPage }) => (isMatchPage ? css` |
||||
width: ${client.styles.matchLogoWidth}rem; |
||||
height: ${client.styles.matchLogoHeight}rem; |
||||
` : '')}
|
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 65px; |
||||
height: 15px; |
||||
margin: 5px 22px; |
||||
` |
||||
: ''} |
||||
` |
||||
@ -1,28 +1,78 @@ |
||||
import { Link } from 'react-router-dom' |
||||
|
||||
import { PAGES } from 'config' |
||||
import { useState } from 'react' |
||||
|
||||
import { ScoreSwitch } from 'features/MatchSwitches' |
||||
import { Logo } from 'features/Logo' |
||||
import { Menu } from 'features/Menu' |
||||
import { Search } from 'features/Search' |
||||
import { HeaderMenu } from 'features/HeaderMenu' |
||||
import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters' |
||||
import { SportsFilter } from 'features/SportsFilter' |
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { |
||||
HeaderMobileWrapper, |
||||
HeaderIconsWrapper, |
||||
IconFavWrapper, |
||||
HeaderStyled, |
||||
ScBody, |
||||
ScSportsWrapper, |
||||
ScModal, |
||||
ScHeaderTitle, |
||||
ScHeaderGroup, |
||||
ScSport, |
||||
} from './styled' |
||||
|
||||
export const HeaderMobile = () => ( |
||||
<HeaderMobileWrapper> |
||||
const sports = [ |
||||
'all_sports', |
||||
'basketball', |
||||
'football_popup', |
||||
'handball', |
||||
'hockey_popup', |
||||
'volleyball', |
||||
] |
||||
|
||||
export const HeaderMobile = () => { |
||||
const { selectedSport, setSelectedSport } = useHeaderFiltersStore() |
||||
const [isOpen, setIsOpen] = useState(false) |
||||
|
||||
const onSportClick = (sport: string) => { |
||||
setSelectedSport(sport) |
||||
setIsOpen(false) |
||||
} |
||||
|
||||
const onModalOpen = () => { |
||||
setIsOpen(true) |
||||
} |
||||
|
||||
const onModalClose = () => { |
||||
setIsOpen(false) |
||||
} |
||||
|
||||
return ( |
||||
<HeaderStyled> |
||||
<HeaderMenu /> |
||||
<DateFilter /> |
||||
<ScSportsWrapper> |
||||
<SportsFilter |
||||
onModalOpen={onModalOpen} |
||||
open={isOpen} |
||||
sport={selectedSport} |
||||
/> |
||||
<ScoreSwitch /> |
||||
<Link to={PAGES.home}> |
||||
<Logo width={52} height={12} /> |
||||
</Link> |
||||
<HeaderIconsWrapper> |
||||
<IconFavWrapper /> |
||||
<Search /> |
||||
<Menu /> |
||||
</HeaderIconsWrapper> |
||||
</HeaderMobileWrapper> |
||||
) |
||||
</ScSportsWrapper> |
||||
<ScModal isOpen={isOpen} withCloseButton close={onModalClose}> |
||||
<ScHeaderGroup> |
||||
<ScHeaderTitle> |
||||
<T9n t='choose_sport' /> |
||||
</ScHeaderTitle> |
||||
</ScHeaderGroup> |
||||
<ScBody> |
||||
{sports.map((sport) => ( |
||||
<ScSport |
||||
key={sport} |
||||
onClick={() => onSportClick(sport)} |
||||
className={selectedSport === sport ? 'active' : ''} |
||||
active={selectedSport === sport} |
||||
> |
||||
<T9n t={sport} /> |
||||
</ScSport> |
||||
))} |
||||
</ScBody> |
||||
</ScModal> |
||||
</HeaderStyled> |
||||
) |
||||
} |
||||
|
||||
@ -1,43 +1,223 @@ |
||||
import styled from 'styled-components/macro' |
||||
import { devices } from 'config/devices' |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
export const HeaderMobileWrapper = styled.div` |
||||
width: 100%; |
||||
height: 40px; |
||||
background-color: rgba(255, 255, 255, 0.1); |
||||
import isUndefined from 'lodash/isUndefined' |
||||
|
||||
import { client } from 'config/clients' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { Logo } from 'features/Logo' |
||||
import { ModalWindow } from 'features/Modal/styled' |
||||
import { Modal as BaseModal } from 'features/Modal' |
||||
import { customScrollbar } from 'features/Common' |
||||
|
||||
export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)' |
||||
|
||||
export const defaultHeaderStyles = ( |
||||
color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null, |
||||
) => { |
||||
if (headerImage && client.name !== 'facr') { |
||||
return css`background: url(${headerImage}.png);
|
||||
background-size: 100% 100%; |
||||
@media (max-width: 450px){ |
||||
background: url(${headerImage}_mobile.png); |
||||
background-size: 100% 100%; |
||||
} |
||||
` |
||||
} |
||||
if (color.includes('linear-gradient')) { |
||||
return css` |
||||
background: ${color}; |
||||
z-index: 10; |
||||
` |
||||
} |
||||
return client.name === 'facr' ? client.styles.homePageHeader : css` |
||||
background: linear-gradient( |
||||
187deg, |
||||
${color} -4.49%, |
||||
#000000 68.29%), |
||||
#000000; |
||||
z-index: 10; |
||||
` |
||||
} |
||||
|
||||
type HeaderProps = { |
||||
color?: string, |
||||
headerImage?: string | null, |
||||
height?: number, |
||||
} |
||||
|
||||
export const HeaderStyled = styled.header<HeaderProps>` |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 12px 18px; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
height: ${({ height = 8.5 }) => height}rem; |
||||
${isMobileDevice |
||||
? css` |
||||
height: 124px |
||||
` |
||||
: ''}; |
||||
|
||||
${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)} |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
padding: 8px; |
||||
` |
||||
: ''} |
||||
` |
||||
|
||||
export const HeaderMobileMidle = styled.div` |
||||
width: 100%; |
||||
type Props = { |
||||
height?: number, |
||||
marginTop?: number, |
||||
} |
||||
|
||||
export const HeaderGroup = styled.div<Props>` |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 12px 0; |
||||
margin-top: 6px; |
||||
|
||||
${({ height }) => (height ? `height: ${height}rem` : '')}; |
||||
${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')}; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
position: relative; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
|
||||
:only-child { |
||||
flex-basis: 100px; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const HeaderIconsWrapper = styled.div` |
||||
export const HeaderLogo = styled(Logo)` |
||||
${({ isMatchPage }) => (isMatchPage ? css` |
||||
width: ${client.styles.matchLogoWidth}rem; |
||||
height: ${client.styles.matchLogoHeight}rem; |
||||
` : '')}
|
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 65px; |
||||
height: 15px; |
||||
` |
||||
: ''} |
||||
` |
||||
|
||||
type PositionProps = { |
||||
isMatchPage?: boolean, |
||||
left?: number, |
||||
right?: number, |
||||
top?: number, |
||||
} |
||||
|
||||
export const Position = styled.div<PositionProps>` |
||||
position: absolute; |
||||
|
||||
top: ${({ isMatchPage, top = 1.14 }) => ( |
||||
isMatchPage |
||||
? client.styles.matchLogoTopMargin ?? top |
||||
: top |
||||
)}rem; |
||||
|
||||
${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)}; |
||||
${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)}; |
||||
` |
||||
|
||||
export const ScSportsWrapper = styled.div` |
||||
height: 80px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
min-width: 100px; |
||||
position: absolute; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
top: 110px; |
||||
padding: 10px; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
/* right: -10px; |
||||
width: 95vw; |
||||
bottom: -90px; */ |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const ScModal = styled(BaseModal)` |
||||
background-color: rgba(0, 0, 0, 0.7); |
||||
|
||||
@media ${devices.tablet} { |
||||
min-width: auto; |
||||
${ModalWindow} { |
||||
min-width: 280px; |
||||
max-height: 250px; |
||||
background-color: #333333; |
||||
border-radius: 0px; |
||||
padding: 0; |
||||
${customScrollbar} |
||||
|
||||
overflow-y: auto; |
||||
${isMobileDevice |
||||
? css` |
||||
height: auto; |
||||
top: -15vh; |
||||
` |
||||
: ''}; |
||||
} |
||||
` |
||||
export const ScHeaderTitle = styled.span` |
||||
font-weight: 700; |
||||
font-size: 10px; |
||||
line-height: 24px; |
||||
color: #FFFFFF; |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 10px; |
||||
line-height: 20px; |
||||
|
||||
@media (orientation: landscape) { |
||||
font-size: 10px; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const IconFavWrapper = styled.div` |
||||
width: 24px; |
||||
height: 20px; |
||||
background-image: url(/images/star-white.svg); |
||||
background-repeat: no-repeat; |
||||
export const ScHeaderGroup = styled.div` |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
padding: 10px; |
||||
border-bottom: 1px solid #505050; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 10px; |
||||
line-height: 20px; |
||||
|
||||
@media ${devices.tablet} { |
||||
display: none; |
||||
@media (orientation: landscape) { |
||||
font-size: 10px; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
export const ScBody = styled.div` |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 0 15px 15px 15px; |
||||
` |
||||
|
||||
type SportProps = { |
||||
active: boolean, |
||||
} |
||||
export const ScSport = styled.div<SportProps>` |
||||
display: flex; |
||||
justify-content: center; |
||||
text-transform: uppercase; |
||||
font-size: 10px; |
||||
font-weight: 700; |
||||
opacity: ${({ active }) => (active ? 1 : 0.5)}; |
||||
margin-top: 18px; |
||||
cursor: pointer; |
||||
` |
||||
|
||||
@ -0,0 +1,38 @@ |
||||
import React from 'react' |
||||
import * as icons from '../../libs/index' |
||||
|
||||
export type IconProps = { |
||||
className?: string, |
||||
color?: string, |
||||
direction?: number, |
||||
onClick?: () => void, |
||||
refIcon: any, |
||||
size?: number, |
||||
} |
||||
|
||||
export const Icon: React.FC<IconProps> = ({ |
||||
className, |
||||
color, |
||||
direction, |
||||
onClick, |
||||
refIcon, |
||||
size, |
||||
}) => ( |
||||
<div |
||||
className={className || 'icon-container'} |
||||
onClick={onClick} |
||||
onKeyDown={onClick} |
||||
style={{ |
||||
fill: color, |
||||
height: size, |
||||
transform: `rotate(${direction}deg)`, |
||||
width: size, |
||||
}} |
||||
aria-hidden='true' |
||||
> |
||||
{ |
||||
// @ts-ignore
|
||||
React.createElement(icons[refIcon], {}) |
||||
} |
||||
</div> |
||||
) |
||||
@ -1,5 +0,0 @@ |
||||
export const Date = () => ( |
||||
<svg width='100%' height='100%' viewBox='0 0 27 26' fill='none' xmlns='http://www.w3.org/2000/svg'> |
||||
<path fillRule='evenodd' clipRule='evenodd' d='M25.2659 3.62109C25.9389 4.26715 26.317 5.14339 26.317 6.05706V22.1336C26.317 23.0473 25.9389 23.9235 25.2659 24.5696C24.5929 25.2156 23.6801 25.5786 22.7283 25.5786H3.58868C2.6369 25.5786 1.72411 25.2156 1.0511 24.5696C0.378092 23.9235 0 23.0473 0 22.1336V6.05706C0 5.14339 0.378092 4.26715 1.0511 3.62109C1.72411 2.97503 2.6369 2.61208 3.58868 2.61208H6.57924V1.46376C6.57924 1.1592 6.70528 0.867119 6.92961 0.651766C7.15395 0.436414 7.45821 0.31543 7.77547 0.31543C8.09273 0.31543 8.39699 0.436414 8.62133 0.651766C8.84567 0.867119 8.9717 1.1592 8.9717 1.46376V2.61208H17.3453V1.46376C17.3453 1.1592 17.4713 0.867119 17.6957 0.651766C17.92 0.436414 18.2242 0.31543 18.5415 0.31543C18.8588 0.31543 19.163 0.436414 19.3874 0.651766C19.6117 0.867119 19.7377 1.1592 19.7377 1.46376V2.61208H22.7283C23.6801 2.61208 24.5929 2.97503 25.2659 3.62109ZM6.57924 4.90873H4.18679C3.7109 4.90873 3.25451 5.09021 2.918 5.41324C2.5815 5.73627 2.39245 6.17439 2.39245 6.63122V9.50203H23.9245V6.63122C23.9245 6.17439 23.7355 5.73627 23.399 5.41324C23.0625 5.09021 22.6061 4.90873 22.1302 4.90873H19.7377V6.05706C19.7377 6.36161 19.6117 6.65369 19.3874 6.86905C19.163 7.0844 18.8588 7.20538 18.5415 7.20538C18.2242 7.20538 17.92 7.0844 17.6957 6.86905C17.4713 6.65369 17.3453 6.36161 17.3453 6.05706V4.90873H8.9717V6.05706C8.9717 6.36161 8.84567 6.65369 8.62133 6.86905C8.39699 7.0844 8.09273 7.20538 7.77547 7.20538C7.45821 7.20538 7.15395 7.0844 6.92961 6.86905C6.70528 6.65369 6.57924 6.36161 6.57924 6.05706V4.90873ZM4.52477 15.3158C5.66029 15.3158 6.58082 14.4321 6.58082 13.3421C6.58082 12.2521 5.66029 11.3684 4.52477 11.3684C3.38924 11.3684 2.46872 12.2521 2.46872 13.3421C2.46872 14.4321 3.38924 15.3158 4.52477 15.3158Z' fill='currentColor' /> |
||||
</svg> |
||||
) |
||||
@ -1,27 +0,0 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
import { SportTypes } from 'config' |
||||
import { getSportLexic } from 'helpers' |
||||
|
||||
type IconProps = { |
||||
src: string, |
||||
} |
||||
|
||||
const Icon = styled.span<IconProps>` |
||||
display: inline-block; |
||||
height: 10px; |
||||
min-width: 10px; |
||||
|
||||
background-image: url(/images/${({ src }) => `${src}-icon`}.svg); |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
background-size: 100% 100%; |
||||
` |
||||
|
||||
type Props = { |
||||
sport: SportTypes, |
||||
} |
||||
|
||||
export const SportIcon = ({ sport }: Props) => ( |
||||
<Icon src={getSportLexic(sport)} /> |
||||
) |
||||
@ -0,0 +1,20 @@ |
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { ScSportsFilter, ScArrow } from './styled' |
||||
|
||||
type SportsFilterProps = { |
||||
onModalOpen: () => void, |
||||
open: boolean, |
||||
sport: string, |
||||
} |
||||
|
||||
export const SportsFilter = ({ |
||||
onModalOpen, |
||||
open, |
||||
sport, |
||||
}: SportsFilterProps) => ( |
||||
<ScSportsFilter onClick={onModalOpen}> |
||||
<T9n t={sport} /> |
||||
<ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} /> |
||||
</ScSportsFilter> |
||||
) |
||||
@ -0,0 +1,25 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { isMobileDevice } from 'config/userAgent' |
||||
import { Icon } from 'features/Icon' |
||||
|
||||
export const ScSportsFilter = styled.div` |
||||
display: flex; |
||||
color: white; |
||||
font-size: 14px; |
||||
width: 30%; |
||||
text-transform: uppercase; |
||||
font-weight: 700; |
||||
height: 100%; |
||||
align-items: center; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 10px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const ScArrow = styled(Icon)` |
||||
margin-left: 14px; |
||||
` |
||||
@ -0,0 +1,89 @@ |
||||
import { useState } from 'react' |
||||
|
||||
import { ProfileTypes } from 'config' |
||||
|
||||
import { SportIcon } from 'components/SportIcon/SportIcon' |
||||
import { T9n } from 'features/T9n' |
||||
import { Icon } from 'features/Icon' |
||||
import type { Match } from 'features/Matches' |
||||
import { MatchCard } from 'features/MatchCard' |
||||
import { |
||||
CountryFlag, |
||||
FavoriteSign, |
||||
LiveSign, |
||||
} from 'features/MatchCard/styled' |
||||
import { useUserFavoritesStore } from 'features/UserFavorites/store' |
||||
|
||||
import type { TournamentType } from 'requests/getMatches/types' |
||||
|
||||
import { |
||||
CardWrapperOuter, |
||||
CardWrapper, |
||||
CountMatches, |
||||
TournamentName, |
||||
ScFirstInfo, |
||||
ScMatchesWrapper, |
||||
ScSecondInfo, |
||||
} from './styled' |
||||
|
||||
export type TournamentProps = { |
||||
tournament: TournamentType & { |
||||
countryId: number, |
||||
live: boolean, |
||||
sportType: number, |
||||
}, |
||||
tournamentMatches: Array<Match>, |
||||
} |
||||
|
||||
export const Tournament = ({ |
||||
tournament, |
||||
tournamentMatches, |
||||
}: TournamentProps) => { |
||||
const [open, setOpen] = useState(false) |
||||
const { |
||||
countryId, |
||||
live, |
||||
sportType, |
||||
} = tournament |
||||
const { isInFavorites } = useUserFavoritesStore() |
||||
|
||||
const currentColor = open ? '#ffffff' : 'rgba(255, 255, 255, 0.5)' |
||||
|
||||
const tournamentInFavorites = isInFavorites( |
||||
ProfileTypes.TOURNAMENTS, |
||||
tournament.id, |
||||
) |
||||
return ( |
||||
<CardWrapperOuter> |
||||
<CardWrapper open={open} onClick={() => setOpen(!open)}> |
||||
<ScFirstInfo> |
||||
<SportIcon fill={open ? '#ffffff' : ''} sport={sportType} /> |
||||
<CountryFlag |
||||
src={`https://instatscout.com/images/flags/48/${countryId}.png`} |
||||
/> |
||||
<TournamentName nameObj={tournament} /> |
||||
{tournamentInFavorites && ( |
||||
<FavoriteSign marginLeft={12} color={currentColor}> |
||||
<Icon refIcon='Star' /> |
||||
</FavoriteSign> |
||||
)} |
||||
</ScFirstInfo> |
||||
<ScSecondInfo> |
||||
{live && ( |
||||
<LiveSign color={open ? '#294FC3' : '#CC0000'}> |
||||
<T9n t='live' /> |
||||
</LiveSign> |
||||
)} |
||||
<CountMatches color={currentColor}>{tournamentMatches.length}</CountMatches> |
||||
<Icon refIcon='Arrow' direction={open ? 180 : 0} color={currentColor} /> |
||||
</ScSecondInfo> |
||||
</CardWrapper> |
||||
<ScMatchesWrapper> |
||||
{open |
||||
&& tournamentMatches?.map((match: Match) => ( |
||||
<MatchCard key={match.id} match={match} /> |
||||
))} |
||||
</ScMatchesWrapper> |
||||
</CardWrapperOuter> |
||||
) |
||||
} |
||||
@ -0,0 +1,86 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
import { Name } from 'features/Name' |
||||
import { Icon } from 'features/Icon' |
||||
|
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
export const CardWrapperOuter = styled.li.attrs({ |
||||
tabIndex: 0, |
||||
})` |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
position: relative; |
||||
${isMobileDevice |
||||
? css` |
||||
width: 100%; |
||||
padding-top: 0; |
||||
margin-bottom: 5px; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const CardWrapper = styled.div<{ open: boolean }>` |
||||
display: flex; |
||||
align-items: center; |
||||
border-radius: 2px; |
||||
|
||||
background-color: ${({ open }) => (open ? '#294FC3' : '#3f3f3f')}; |
||||
cursor: pointer; |
||||
${isMobileDevice |
||||
? css` |
||||
padding: 10px; |
||||
width: 100%; |
||||
height: 50px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const TournamentName = styled(Name)` |
||||
font-weight: 700; |
||||
font-size: 13px; |
||||
line-height: 16px; |
||||
color: #ffffff; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
margin-left: 7px; |
||||
white-space: nowrap; |
||||
` |
||||
|
||||
export const CountMatches = styled.span<{ color?: string }>` |
||||
font-weight: 700; |
||||
font-size: 12px; |
||||
line-height: 16px; |
||||
color: ${({ color }) => color}; |
||||
width: 20px; |
||||
text-align: center; |
||||
margin-left: 20px; |
||||
` |
||||
|
||||
export const ScFirstInfo = styled.div` |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
width: 80%; |
||||
` |
||||
|
||||
export const ScSecondInfo = styled.div` |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-end; |
||||
width: 100%; |
||||
` |
||||
|
||||
export const ScMatchesWrapper = styled.ul` |
||||
display: flex; |
||||
flex-direction: column; |
||||
` |
||||
|
||||
export const ScStar = styled(Icon)` |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
` |
||||
@ -0,0 +1,55 @@ |
||||
import { getSportLexic } from 'helpers/getSportLexic' |
||||
|
||||
import { TournamentListProps } from 'features/TournamentList' |
||||
import type { Match } from 'features/Matches' |
||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
||||
|
||||
export const useTournaments = (matches: Array<Match>) => { |
||||
const { selectedSport } = useHeaderFiltersStore() |
||||
|
||||
const compareSport = (match: Match, sportName: string) => { |
||||
if (sportName === 'all_sports') { |
||||
return true |
||||
} |
||||
const sport = getSportLexic(match.sportType) |
||||
if (sportName.indexOf('_popup') !== -1) { |
||||
return sport === sportName.replace('_popup', '') |
||||
} |
||||
return sport === sportName |
||||
} |
||||
|
||||
const tournaments = matches.reduce((acc: Array<TournamentListProps> | [], match: Match) => { |
||||
if (matches.length === 0) return [] |
||||
if (!acc[match.tournament.id] && compareSport(match, selectedSport)) { |
||||
const tournament = { |
||||
...match.tournament, |
||||
countryId: match.countryId, |
||||
live: match.live, |
||||
matches: [match], |
||||
sportType: match.sportType, |
||||
} |
||||
acc[match.tournament.id] = { |
||||
tournament: { |
||||
...tournament, |
||||
}, |
||||
tournamentMatches: [match], |
||||
} |
||||
} else if (compareSport(match, selectedSport)) { |
||||
acc[match.tournament.id] = { |
||||
...acc[match.tournament.id], |
||||
tournament: { |
||||
...acc[match.tournament.id].tournament, |
||||
live: acc[match.tournament.id]?.tournament.live |
||||
? acc[match.tournament.id]?.tournament.live |
||||
: match.live, |
||||
}, |
||||
tournamentMatches: [...acc[match.tournament.id].tournamentMatches, match], |
||||
} |
||||
} |
||||
return acc |
||||
}, []) |
||||
|
||||
return { |
||||
tournaments, |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
import type { Match } from 'features/Matches' |
||||
|
||||
import type { TournamentType } from 'requests/getMatches/types' |
||||
|
||||
import { Tournament } from './components/Tournament' |
||||
import { useTournaments } from './hooks' |
||||
|
||||
type TournamentTypeProps = { |
||||
matches: Array<Match>, |
||||
} |
||||
|
||||
export type TournamentListProps = { |
||||
tournament: TournamentType & { |
||||
countryId: number, |
||||
live: boolean, |
||||
sportType: number, |
||||
}, |
||||
tournamentMatches: Array<Match>, |
||||
} |
||||
|
||||
export const TournamentList = ({ matches }: TournamentTypeProps) => { |
||||
const { tournaments } = useTournaments(matches) |
||||
|
||||
return ( |
||||
<> |
||||
{tournaments?.map(({ tournament, tournamentMatches }: TournamentListProps) => ( |
||||
<Tournament |
||||
key={tournament.id} |
||||
tournament={tournament} |
||||
tournamentMatches={tournamentMatches} |
||||
/> |
||||
))} |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
import * as icons from './index' |
||||
|
||||
export type iconTypes = keyof typeof icons |
||||
@ -0,0 +1,11 @@ |
||||
export { Arrow } from './objects/Arrow' |
||||
export { Date } from './objects/Date' |
||||
export { Calendar } from './objects/Calendar' |
||||
export { Basketball } from './objects/Basketball' |
||||
export { Football } from './objects/Football' |
||||
export { Hockey } from './objects/Hockey' |
||||
export { Handball } from './objects/Handball' |
||||
export { Volleyball } from './objects/Volleyball' |
||||
export { Star } from './objects/Star' |
||||
export { Dollar } from './objects/Dollar' |
||||
export { Close } from './objects/Close' |
||||
@ -0,0 +1,15 @@ |
||||
export const Arrow = (): JSX.Element => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
width='12' |
||||
height='8' |
||||
fill='true' |
||||
viewBox='0 0 12 8' |
||||
> |
||||
<path |
||||
fillRule='evenodd' |
||||
d='M10.6.6L6 5.2 1.4.6 0 2l6 6 6-6L10.6.6z' |
||||
clipRule='evenodd' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,22 @@ |
||||
export const Basketball = () => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
width='10' |
||||
height='10' |
||||
fill='true' |
||||
viewBox='0 0 40 40' |
||||
> |
||||
<path |
||||
d='M20.298.006h-.15A19.268 19.268 0 0025.264 13.7l8.348-8.347A20.011 20.011 0 0020.298 0z' |
||||
/> |
||||
<path |
||||
d='M18.666.064a20.011 20.011 0 00-12.261 5.3l13.6 13.6 4.21-4.21A20.753 20.753 0 0118.666.064zM5.35 6.407A20.011 20.011 0 00.065 18.674a20.746 20.746 0 0114.685 5.544l4.2-4.2zM34.65 6.416l-8.34 8.344A19.261 19.261 0 0040 19.875a20.011 20.011 0 00-5.35-13.459z' |
||||
/> |
||||
<path |
||||
d='M25.264 15.804l-4.21 4.209L34.662 33.62a20.011 20.011 0 005.283-12.266 20.763 20.763 0 01-14.681-5.55zM.693 20.135c-.226 0-.453.015-.68.021A20.011 20.011 0 005.36 33.612l8.348-8.343A19.265 19.265 0 00.693 20.136zM20.007 21.063l-4.2 4.2a20.755 20.755 0 015.553 14.7 20.011 20.011 0 0012.249-5.3z' |
||||
/> |
||||
<path |
||||
d='M14.757 26.312L6.399 34.67a20.011 20.011 0 0013.471 5.347 19.26 19.26 0 00-5.113-13.705z' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,24 @@ |
||||
export const Calendar = (): JSX.Element => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
width='9' |
||||
height='9' |
||||
fill='true' |
||||
viewBox='0 0 9 9' |
||||
> |
||||
<path |
||||
fillOpacity='0.5' |
||||
fillRule='evenodd' |
||||
d='M8.64 1.178c.23.23.36.542.36.867v5.728A1.227 1.227 0 017.773 9H1.227A1.227 1.227 0 010 7.773V2.045A1.227 1.227 0 011.227.818H2.25V.41a.41.41 0 11.818 0v.41h2.864v-.41a.41.41 0 11.818 0v.41h1.023c.325 0 .637.128.868.359zm-6.39.458h-.818a.614.614 0 00-.614.614v1.023h7.364V2.25a.614.614 0 00-.614-.614H6.75v.41a.41.41 0 11-.818 0v-.41H3.068v.41a.41.41 0 11-.818 0v-.41zm5.85 2.47H.81v3.107a1 1 0 001 1H7.1a1 1 0 001-1V4.106z' |
||||
clipRule='evenodd' |
||||
/> |
||||
<ellipse |
||||
cx='2.323' |
||||
cy='5.631' |
||||
fill='#fff' |
||||
fillOpacity='0.5' |
||||
rx='0.703' |
||||
ry='0.703' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,15 @@ |
||||
export const Date = () => ( |
||||
<svg |
||||
width='100%' |
||||
height='100%' |
||||
viewBox='0 0 27 26' |
||||
fill='true' |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
> |
||||
<path |
||||
clipRule='evenodd' |
||||
d='M25.2659 3.62109C25.9389 4.26715 26.317 5.14339 26.317 6.05706V22.1336C26.317 23.0473 25.9389 23.9235 25.2659 24.5696C24.5929 25.2156 23.6801 25.5786 22.7283 25.5786H3.58868C2.6369 25.5786 1.72411 25.2156 1.0511 24.5696C0.378092 23.9235 0 23.0473 0 22.1336V6.05706C0 5.14339 0.378092 4.26715 1.0511 3.62109C1.72411 2.97503 2.6369 2.61208 3.58868 2.61208H6.57924V1.46376C6.57924 1.1592 6.70528 0.867119 6.92961 0.651766C7.15395 0.436414 7.45821 0.31543 7.77547 0.31543C8.09273 0.31543 8.39699 0.436414 8.62133 0.651766C8.84567 0.867119 8.9717 1.1592 8.9717 1.46376V2.61208H17.3453V1.46376C17.3453 1.1592 17.4713 0.867119 17.6957 0.651766C17.92 0.436414 18.2242 0.31543 18.5415 0.31543C18.8588 0.31543 19.163 0.436414 19.3874 0.651766C19.6117 0.867119 19.7377 1.1592 19.7377 1.46376V2.61208H22.7283C23.6801 2.61208 24.5929 2.97503 25.2659 3.62109ZM6.57924 4.90873H4.18679C3.7109 4.90873 3.25451 5.09021 2.918 5.41324C2.5815 5.73627 2.39245 6.17439 2.39245 6.63122V9.50203H23.9245V6.63122C23.9245 6.17439 23.7355 5.73627 23.399 5.41324C23.0625 5.09021 22.6061 4.90873 22.1302 4.90873H19.7377V6.05706C19.7377 6.36161 19.6117 6.65369 19.3874 6.86905C19.163 7.0844 18.8588 7.20538 18.5415 7.20538C18.2242 7.20538 17.92 7.0844 17.6957 6.86905C17.4713 6.65369 17.3453 6.36161 17.3453 6.05706V4.90873H8.9717V6.05706C8.9717 6.36161 8.84567 6.65369 8.62133 6.86905C8.39699 7.0844 8.09273 7.20538 7.77547 7.20538C7.45821 7.20538 7.15395 7.0844 6.92961 6.86905C6.70528 6.65369 6.57924 6.36161 6.57924 6.05706V4.90873ZM4.52477 15.3158C5.66029 15.3158 6.58082 14.4321 6.58082 13.3421C6.58082 12.2521 5.66029 11.3684 4.52477 11.3684C3.38924 11.3684 2.46872 12.2521 2.46872 13.3421C2.46872 14.4321 3.38924 15.3158 4.52477 15.3158Z' |
||||
fill='currentColor' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,12 @@ |
||||
export const Dollar = () => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
fill='true' |
||||
viewBox='0 0 12 23' |
||||
> |
||||
<path |
||||
fill='currentColor' |
||||
d='M8.812 15.581c0-.664-.21-1.21-.633-1.64-.422-.438-1.125-.829-2.11-1.172-.984-.352-1.75-.676-2.296-.973-1.82-.976-2.73-2.422-2.73-4.336 0-1.297.394-2.363 1.183-3.199.79-.836 1.86-1.332 3.211-1.488V.218h1.875v2.578c1.36.195 2.41.774 3.152 1.735.742.953 1.114 2.195 1.114 3.726H8.742c0-.984-.223-1.758-.668-2.32-.438-.57-1.035-.856-1.793-.856-.75 0-1.336.203-1.758.61-.422.406-.633.988-.633 1.746 0 .68.207 1.226.621 1.64.422.407 1.133.793 2.133 1.16 1 .368 1.785.708 2.356 1.02.57.313 1.05.672 1.44 1.078.392.399.692.86.903 1.383.211.524.317 1.137.317 1.84 0 1.32-.407 2.39-1.22 3.21-.804.821-1.929 1.305-3.374 1.454v2.285H5.203v-2.273c-1.547-.172-2.739-.727-3.575-1.664C.8 17.632.386 16.39.386 14.843h2.848c0 .984.246 1.746.738 2.285.5.54 1.203.809 2.11.809.89 0 1.566-.215 2.027-.645.469-.43.703-1 .703-1.71z' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,13 @@ |
||||
export const Football = () => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
width='10' |
||||
height='11' |
||||
fill='true' |
||||
viewBox='0 0 10 11' |
||||
> |
||||
<path |
||||
d='M3.17 1.074a4.898 4.898 0 00-1.633 1.109 5.026 5.026 0 00-1.083 1.67A5.131 5.131 0 00.092 5.75c0 .656.122 1.295.362 1.9A5.025 5.025 0 001.537 9.32c.471.481 1.02.854 1.633 1.108.59.246 1.216.37 1.856.37.641 0 1.266-.125 1.857-.37A5.018 5.018 0 009.599 7.65c.24-.604.361-1.243.361-1.899 0-.655-.121-1.294-.361-1.899a5.026 5.026 0 00-1.084-1.67 4.893 4.893 0 00-1.632-1.108A4.824 4.824 0 005.026.705c-.64 0-1.265.124-1.856.37zM1.325 7.876a3.402 3.402 0 01-.65-.535 4.86 4.86 0 01-.15-2.651c.092-.187.197-.365.316-.537.037-.053.07-.108.11-.159l1.113.674v.028c-.003.613.058 1.221.18 1.82v.007l-.863 1.385a.68.68 0 01-.056-.032zm3.311 2.34c.192.101.39.186.593.255a4.545 4.545 0 01-2.504-.62l1.867.34.044.026zm-.007-.344l-2.202-.401a7.042 7.042 0 01-.69-1.02c-.05-.093-.106-.182-.15-.278l.863-1.384.065.017c.54.148 1.089.253 1.642.335.032.004.059.009.082.011l1.034 1.829c-.18.258-.36.514-.546.768-.031.042-.064.083-.098.123zm3.665-.779c-.176.18-.362.342-.557.486a4.41 4.41 0 00-.166-.776l1.103-2.105c.304-.142.597-.302.87-.501a.393.393 0 00.087-.087 4.75 4.75 0 01-1.337 2.983zm-.05-2.73c.042.08.082.16.123.243L7.3 8.639l-.018.004a9.511 9.511 0 01-1.742.171l-1.064-1.88a118.854 118.854 0 00.82-1.592l2.2-.23c.27.404.526.817.748 1.251zm-.446-2.412c-.104.282-.216.562-.327.841l-2.144.226a1.786 1.786 0 00-.08-.102l-.763-.877.007-.007-.308-.315.597-1.839a.82.82 0 01.124-.025c.325-.033.65-.072.975-.09.199-.012.4-.019.602-.004L7.958 3.46c-.051.165-.1.33-.16.49zm.496-1.542c.407.417.723.893.946 1.402a4.657 4.657 0 00-1.03-.54L6.757 1.593c.01-.072.015-.145.017-.218.553.23 1.072.575 1.52 1.033zM3.547 1.29l.011.008c.333.118.635.29.92.496L3.92 3.51a.059.059 0 00-.008.003c-.114.049-.23.092-.343.144a9.763 9.763 0 00-1.34.74l-1.1-.667a.347.347 0 01.02-.102c.073-.202.146-.404.23-.601.064-.152.137-.3.217-.443a4.578 4.578 0 011.96-1.313.327.327 0 00-.01.017z' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,13 @@ |
||||
export const Handball = () => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
width='11' |
||||
height='11' |
||||
fill='true' |
||||
viewBox='0 0 11 11' |
||||
> |
||||
<path |
||||
d='M3.7.846a4.898 4.898 0 00-1.632 1.108 5.026 5.026 0 00-1.083 1.67 5.131 5.131 0 00-.362 1.899c0 .655.122 1.294.362 1.899a5.025 5.025 0 001.083 1.67c.471.48 1.02.854 1.633 1.108.59.245 1.216.37 1.856.37.641 0 1.266-.125 1.857-.37a5.019 5.019 0 002.716-2.778c.24-.605.361-1.244.361-1.899s-.121-1.294-.361-1.9a5.027 5.027 0 00-1.084-1.669A4.893 4.893 0 007.414.846a4.824 4.824 0 00-1.857-.37c-.64 0-1.265.125-1.856.37zM1.857 7.647a3.402 3.402 0 01-.65-.535 4.86 4.86 0 01-.15-2.651c.092-.186.197-.365.316-.536.037-.053.07-.108.11-.16l1.113.674v.029c-.003.612.058 1.22.18 1.82v.007l-.863 1.384a.677.677 0 01-.056-.032zm3.311 2.341c.192.1.39.185.593.254a4.545 4.545 0 01-2.504-.62l1.867.34a.52.52 0 00.044.026zm-.007-.344l-2.202-.402a7.042 7.042 0 01-.69-1.02c-.05-.092-.106-.182-.15-.278l.863-1.383.065.016c.54.148 1.089.253 1.642.335l.082.012 1.034 1.828c-.18.258-.36.515-.546.769-.031.042-.064.082-.098.123zm3.665-.78c-.176.18-.362.342-.557.486a4.41 4.41 0 00-.166-.776L9.205 6.47c.304-.141.597-.302.87-.5a.393.393 0 00.087-.087 4.75 4.75 0 01-1.337 2.983zm-.05-2.73c.042.08.082.161.123.243L7.832 8.411l-.018.003a9.511 9.511 0 01-1.742.172L5.008 6.705a119.343 119.343 0 00.82-1.591l2.2-.231c.27.404.526.817.748 1.251zM8.33 3.723c-.104.282-.216.561-.327.84l-2.144.226a1.781 1.781 0 00-.08-.101l-.763-.877.007-.008-.308-.315.597-1.838a.821.821 0 01.124-.025c.325-.034.65-.072.975-.091.199-.012.4-.018.602-.004l1.477 1.703c-.051.164-.1.329-.16.49zm.496-1.542c.407.417.723.893.946 1.401a4.657 4.657 0 00-1.03-.54L7.288 1.366a2.01 2.01 0 00.017-.218c.553.23 1.072.575 1.52 1.033zM4.078 1.06c.005.004.008.008.011.009.333.117.635.29.92.495L4.45 3.282a.06.06 0 00-.008.003c-.114.048-.23.091-.343.144a9.762 9.762 0 00-1.34.739l-1.1-.666a.347.347 0 01.02-.103c.073-.201.146-.404.23-.6a4.55 4.55 0 01.217-.443 4.578 4.578 0 011.96-1.313.338.338 0 00-.01.017z' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,11 @@ |
||||
export const Hockey = () => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
fill='true' |
||||
viewBox='0 0 40 40' |
||||
> |
||||
<path |
||||
d='M39.349 1.675L34.761.078a.728.728 0 00-1 .4l-9.573 24.751c-.2.4-.4.6-.8.6H4.44c-.4 0-.6.2-.8.6L.052 39c-.2.4.2 1 .8 1h24.533c.4 0 .6-.2.8-.6L39.947 2.673a.763.763 0 00-.598-.998zM12.02 36.008H5.039l1.8-5.988h7.181z' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,14 @@ |
||||
export const Star = () => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
width='8' |
||||
height='8' |
||||
fill='none' |
||||
viewBox='0 0 8 8' |
||||
> |
||||
<path |
||||
fill='currentColor' |
||||
d='M4 0l1.147 2.42 2.657.344-1.948 1.84.495 2.632L4 5.952 1.649 7.236l.495-2.633-1.948-1.84 2.657-.342L4 0z' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,19 @@ |
||||
export const Volleyball = () => ( |
||||
<svg |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
width='11' |
||||
height='11' |
||||
fill='true' |
||||
viewBox='0 0 11 11' |
||||
> |
||||
<g clipPath='url(#clip0_25420_222728)'> |
||||
<path d='M5.697 3.62c-.11.63-.305 1.22-.63 1.763a.153.153 0 01-.11.063c-1.76-.007-3.243.648-4.486 1.876-.025.025-.046.052-.081.093-.021-.05-.035-.083-.046-.117a4.886 4.886 0 01-.19-2.314.282.282 0 01.082-.148c.727-.689 1.591-1.118 2.56-1.341.863-.2 1.727-.209 2.588.019.077.02.152.045.23.07l.083.036zM6.116.847c.181.05.348.091.511.143.62.198 1.195.518 1.69.941.04.035.07.083.083.136.366 1.951-.117 3.658-1.479 5.11-.054.057-.118.106-.18.163a.681.681 0 01-.063-.042A5.225 5.225 0 015.53 5.945c-.04-.067-.043-.117 0-.188a5.844 5.844 0 00.796-2.38A6.212 6.212 0 006.124.91C6.12.9 6.12.89 6.116.847zM8.85 9.065c-.2.187-.375.365-.565.526a4.814 4.814 0 01-1.501.86.236.236 0 01-.148.008c-1.837-.675-3.055-1.94-3.618-3.825-.02-.07-.03-.143-.045-.214 0-.013 0-.025.002-.037a4.476 4.476 0 011.01-.275c.28-.038.566-.048.849-.07.052-.005.085.01.115.062.848 1.493 2.118 2.444 3.755 2.923.036.012.073.021.146.042z' /> |
||||
<path d='M.465 3.881c.163-.433.392-.839.68-1.202.84-1.062 1.931-1.696 3.27-1.888.318-.045.644-.028.966-.04.055-.002.087.018.105.076.22.668.317 1.37.286 2.074-.002.034-.009.068-.014.107a5.964 5.964 0 00-2.746-.16A6.332 6.332 0 00.465 3.88zM2.406 6.643c.49 1.838 1.597 3.171 3.262 4.087-.267.007-.534.03-.8.017a4.928 4.928 0 01-2.736-.971A4.903 4.903 0 01.68 8.082c-.016-.031-.019-.093 0-.116a5.547 5.547 0 011.702-1.319.098.098 0 01.025-.004zM7.237 7.705C8.592 6.345 9.19 4.7 9.11 2.778c.025.033.045.057.062.083.533.76.84 1.6.908 2.526.08 1.109-.191 2.127-.78 3.066-.044.071-.083.096-.173.075a5.799 5.799 0 01-1.882-.811.027.027 0 01-.007-.012z' /> |
||||
</g> |
||||
<defs> |
||||
<clipPath id='clip0_25420_222728'> |
||||
<path fill='#fff' d='M0 0H10V10H0z' transform='translate(.093 .751)' /> |
||||
</clipPath> |
||||
</defs> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,8 @@ |
||||
import { createContext, useContext } from 'react' |
||||
import { MatchesStore } from './matchesStore' |
||||
|
||||
export const RootStoreContext = createContext({ |
||||
matchesStore: new MatchesStore(), |
||||
}) |
||||
|
||||
export const useStores = () => useContext(RootStoreContext) |
||||
@ -0,0 +1,21 @@ |
||||
import { makeAutoObservable, observable } from 'mobx' |
||||
|
||||
import type { Match } from 'features/Matches/hooks' |
||||
|
||||
export class MatchesStore { |
||||
matches: Array<Match> = [] |
||||
|
||||
constructor() { |
||||
makeAutoObservable(this, { |
||||
matches: observable, |
||||
}) |
||||
} |
||||
|
||||
getMatches() { |
||||
return this.matches |
||||
} |
||||
|
||||
filterMatches(matches: Array<Match>, sport: number) { |
||||
this.matches = matches.filter((match) => match.sportType === sport) |
||||
} |
||||
} |
||||
Loading…
Reference in new issue