Revert "style(#2317): change style for home page in mobile devices"
This reverts commit ad4a33c812.
keep-around/ff4cf7bdec9a659667e4ebb944ae37d48fa84117
Andrei Dekterev
4 years ago
parent
161629a114
commit
ff4cf7bdec
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.7 KiB |
@ -1,66 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
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,78 +1,28 @@ |
|||||||
import { useState } from 'react' |
import { Link } from 'react-router-dom' |
||||||
|
|
||||||
|
import { PAGES } from 'config' |
||||||
|
|
||||||
import { ScoreSwitch } from 'features/MatchSwitches' |
import { ScoreSwitch } from 'features/MatchSwitches' |
||||||
import { HeaderMenu } from 'features/HeaderMenu' |
import { Logo } from 'features/Logo' |
||||||
import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters' |
import { Menu } from 'features/Menu' |
||||||
import { SportsFilter } from 'features/SportsFilter' |
import { Search } from 'features/Search' |
||||||
import { T9n } from 'features/T9n' |
|
||||||
|
|
||||||
import { |
import { |
||||||
HeaderStyled, |
HeaderMobileWrapper, |
||||||
ScBody, |
HeaderIconsWrapper, |
||||||
ScSportsWrapper, |
IconFavWrapper, |
||||||
ScModal, |
|
||||||
ScHeaderTitle, |
|
||||||
ScHeaderGroup, |
|
||||||
ScSport, |
|
||||||
} from './styled' |
} from './styled' |
||||||
|
|
||||||
const sports = [ |
export const HeaderMobile = () => ( |
||||||
'all_sports', |
<HeaderMobileWrapper> |
||||||
'basketball', |
<ScoreSwitch /> |
||||||
'football_popup', |
<Link to={PAGES.home}> |
||||||
'handball', |
<Logo width={52} height={12} /> |
||||||
'hockey_popup', |
</Link> |
||||||
'volleyball', |
<HeaderIconsWrapper> |
||||||
] |
<IconFavWrapper /> |
||||||
|
<Search /> |
||||||
export const HeaderMobile = () => { |
<Menu /> |
||||||
const { selectedSport, setSelectedSport } = useHeaderFiltersStore() |
</HeaderIconsWrapper> |
||||||
const [isOpen, setIsOpen] = useState(false) |
</HeaderMobileWrapper> |
||||||
|
) |
||||||
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 /> |
|
||||||
</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,223 +1,43 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
import styled from 'styled-components/macro' |
||||||
|
import { devices } from 'config/devices' |
||||||
|
|
||||||
import isUndefined from 'lodash/isUndefined' |
export const HeaderMobileWrapper = styled.div` |
||||||
|
width: 100%; |
||||||
import { client } from 'config/clients' |
height: 40px; |
||||||
import { isMobileDevice } from 'config/userAgent' |
background-color: rgba(255, 255, 255, 0.1); |
||||||
|
|
||||||
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; |
display: flex; |
||||||
flex-direction: column; |
align-items: center; |
||||||
justify-content: center; |
justify-content: space-between; |
||||||
height: ${({ height = 8.5 }) => height}rem; |
padding: 12px 18px; |
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
height: 124px |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
|
|
||||||
${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)} |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
padding: 8px; |
|
||||||
` |
|
||||||
: ''} |
|
||||||
` |
` |
||||||
|
|
||||||
type Props = { |
export const HeaderMobileMidle = styled.div` |
||||||
height?: number, |
width: 100%; |
||||||
marginTop?: number, |
|
||||||
} |
|
||||||
|
|
||||||
export const HeaderGroup = styled.div<Props>` |
|
||||||
display: flex; |
display: flex; |
||||||
flex-direction: row; |
|
||||||
align-items: center; |
align-items: center; |
||||||
|
justify-content: center; |
||||||
${({ height }) => (height ? `height: ${height}rem` : '')}; |
padding: 12px 0; |
||||||
${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')}; |
margin-top: 6px; |
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
position: relative; |
|
||||||
justify-content: space-between; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
: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; |
|
||||||
` |
|
||||||
: ''} |
|
||||||
` |
|
||||||
|
|
||||||
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` |
export const HeaderIconsWrapper = styled.div` |
||||||
height: 80px; |
|
||||||
display: flex; |
display: flex; |
||||||
flex-direction: row; |
|
||||||
align-items: center; |
align-items: center; |
||||||
position: absolute; |
justify-content: space-around; |
||||||
|
min-width: 100px; |
||||||
|
|
||||||
${isMobileDevice |
@media ${devices.tablet} { |
||||||
? css` |
min-width: auto; |
||||||
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); |
|
||||||
|
|
||||||
${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) { |
export const IconFavWrapper = styled.div` |
||||||
font-size: 10px; |
width: 24px; |
||||||
} |
height: 20px; |
||||||
` |
background-image: url(/images/star-white.svg); |
||||||
: ''}; |
background-repeat: no-repeat; |
||||||
` |
|
||||||
|
|
||||||
export const ScHeaderGroup = styled.div` |
@media ${devices.tablet} { |
||||||
display: flex; |
display: none; |
||||||
flex-direction: row; |
} |
||||||
justify-content: center; |
|
||||||
padding: 10px; |
|
||||||
border-bottom: 1px solid #505050; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 10px; |
|
||||||
line-height: 20px; |
|
||||||
|
|
||||||
@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; |
|
||||||
` |
` |
||||||
|
|||||||
@ -1,38 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -0,0 +1,5 @@ |
|||||||
|
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> |
||||||
|
) |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
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)} /> |
||||||
|
) |
||||||
@ -1,20 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
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; |
|
||||||
` |
|
||||||
@ -1,89 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
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; |
|
||||||
` |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
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, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
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} |
|
||||||
/> |
|
||||||
))} |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
import * as icons from './index' |
|
||||||
|
|
||||||
export type iconTypes = keyof typeof icons |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
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' |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,12 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
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> |
|
||||||
) |
|
||||||
Loading…
Reference in new issue