diff --git a/src/components/SelectFilter/index.tsx b/src/components/SelectFilter/index.tsx new file mode 100644 index 00000000..377e2af1 --- /dev/null +++ b/src/components/SelectFilter/index.tsx @@ -0,0 +1,20 @@ +import { T9n } from 'features/T9n' + +import { ScSelectFilter, ScArrow } from './styled' + +type SportsFilterProps = { + onModalOpen: () => void, + open: boolean, + selectItem: string, +} + +export const SelectFilter = ({ + onModalOpen, + open, + selectItem, +}: SportsFilterProps) => ( + + + + +) diff --git a/src/components/SelectFilter/styled.tsx b/src/components/SelectFilter/styled.tsx new file mode 100644 index 00000000..0b74e1d0 --- /dev/null +++ b/src/components/SelectFilter/styled.tsx @@ -0,0 +1,26 @@ +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' +import { Icon } from 'features/Icon' + +export const ScSelectFilter = styled.div` + display: flex; + color: white; + font-size: 14px; + width: 30%; + text-transform: uppercase; + font-weight: 700; + align-items: center; + cursor: pointer; + + ${isMobileDevice + ? css` + letter-spacing: 0.15rem; + font-size: 10px; + ` + : ''}; +` + +export const ScArrow = styled(Icon)` + margin-left: 14px; +` diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 27479dfb..c2feba70 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -23,6 +23,7 @@ export const useFilters = () => { validator: isValidDate, }) const [selectedSport, setSelectedSport] = useState('all_sports') + const [selectedLeague, setSelectedLeague] = useState('all_leagues') const isTodaySelected = isToday(selectedDate) diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index 47a4512c..4e944ef0 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,78 +1,17 @@ -import { useState } from 'react' - -import { ScoreSwitch } from 'features/MatchSwitches' import { HeaderMenu } from 'features/HeaderMenu' -import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters' +import { DateFilter } from 'features/HeaderFilters' +import { ScoreSwitch } from 'features/MatchSwitches' import { SportsFilter } from 'features/SportsFilter' -import { T9n } from 'features/T9n' - -import { - HeaderStyled, - ScBody, - ScSportsWrapper, - ScModal, - ScHeaderTitle, - ScHeaderGroup, - ScSport, -} from './styled' - -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 ( - - - - - - - - - - - - - - - {sports.map((sport) => ( - onSportClick(sport)} - className={selectedSport === sport ? 'active' : ''} - active={selectedSport === sport} - > - - - ))} - - - - ) -} +import { HeaderStyled, ScSportsWrapper } from './styled' + +export const HeaderMobile = () => ( + + + + + + + + +) diff --git a/src/features/HomePage/components/HeaderFilters/index.tsx b/src/features/HomePage/components/HeaderFilters/index.tsx new file mode 100644 index 00000000..956d139d --- /dev/null +++ b/src/features/HomePage/components/HeaderFilters/index.tsx @@ -0,0 +1,20 @@ +import { SportsFilter } from 'features/SportsFilter' +import { useHeaderFiltersStore } from 'features/HeaderFilters' +import { SelectFilter } from 'components/SelectFilter' + +import { ScHeaderFilters } from './styled' + +export const HeaderFilters = () => { + const { selectedSport, setSelectedSport } = useHeaderFiltersStore() + + return ( + + + console.log(1)} + open={false} + selectItem='all_sports' + /> + + ) +} diff --git a/src/features/HomePage/components/HeaderFilters/styled.tsx b/src/features/HomePage/components/HeaderFilters/styled.tsx new file mode 100644 index 00000000..eb1526d4 --- /dev/null +++ b/src/features/HomePage/components/HeaderFilters/styled.tsx @@ -0,0 +1,6 @@ +import styled from 'styled-components/macro' + +export const ScHeaderFilters = styled.div` + display: flex; + flex-direction: row; +` diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index 5bc4254b..c6c9c2e8 100644 --- a/src/features/HomePage/index.tsx +++ b/src/features/HomePage/index.tsx @@ -18,6 +18,7 @@ import { UserFavorites } from 'features/UserFavorites' import { useHomePage } from './hooks' import { Header } from './components/Header' import { HeaderMobile } from '../HeaderMobile' +import { HeaderFilters } from './components/HeaderFilters' const Home = () => { usePageLogger(PAGES.home) @@ -28,6 +29,7 @@ const Home = () => {
+
diff --git a/src/features/SportsFilter/components/SelectSport/index.tsx b/src/features/SportsFilter/components/SelectSport/index.tsx new file mode 100644 index 00000000..ed162520 --- /dev/null +++ b/src/features/SportsFilter/components/SelectSport/index.tsx @@ -0,0 +1,20 @@ +import { T9n } from 'features/T9n' + +import { ScSportsFilter, ScArrow } from './styled' + +type SportsFilterProps = { + onModalOpen: () => void, + open: boolean, + sport: string, +} + +export const SelectSport = ({ + onModalOpen, + open, + sport, +}: SportsFilterProps) => ( + + + + +) diff --git a/src/features/SportsFilter/styled.tsx b/src/features/SportsFilter/components/SelectSport/styled.tsx similarity index 96% rename from src/features/SportsFilter/styled.tsx rename to src/features/SportsFilter/components/SelectSport/styled.tsx index f8d01241..9515ab38 100644 --- a/src/features/SportsFilter/styled.tsx +++ b/src/features/SportsFilter/components/SelectSport/styled.tsx @@ -10,7 +10,7 @@ export const ScSportsFilter = styled.div` width: 30%; text-transform: uppercase; font-weight: 700; - height: 100%; + cursor: pointer; align-items: center; ${isMobileDevice diff --git a/src/features/SportsFilter/components/SelectSportPopup/index.tsx b/src/features/SportsFilter/components/SelectSportPopup/index.tsx new file mode 100644 index 00000000..87a368af --- /dev/null +++ b/src/features/SportsFilter/components/SelectSportPopup/index.tsx @@ -0,0 +1,53 @@ +import { T9n } from 'features/T9n' + +import { + ScBody, + ScModal, + ScHeaderTitle, + ScHeaderGroup, + ScSport, +} from './styled' + +const sports = [ + 'all_sports', + 'basketball', + 'football_popup', + 'handball', + 'hockey_popup', + 'volleyball', +] + +type Props = { + isOpen: boolean, + onModalClose: () => void, + onSportClick: (sport: string) => void, + selectedSport: string, +} +export const SelectSportPopup = ({ + isOpen, + onModalClose, + onSportClick, + selectedSport, +}: Props) => ( + <> + + + + + + + + {sports.map((sport: string) => ( + onSportClick(sport)} + className={selectedSport === sport ? 'active' : ''} + active={selectedSport === sport} + > + + + ))} + + + +) diff --git a/src/features/SportsFilter/components/SelectSportPopup/styled.tsx b/src/features/SportsFilter/components/SelectSportPopup/styled.tsx new file mode 100644 index 00000000..63bed564 --- /dev/null +++ b/src/features/SportsFilter/components/SelectSportPopup/styled.tsx @@ -0,0 +1,226 @@ +import styled, { css } from 'styled-components/macro' + +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( + 236deg, + ${color} -4.49%, + #000000 50%), + #000000; + z-index: 10; +` +} + +type HeaderProps = { + color?: string, + headerImage?: string | null, + height?: number, +} + +export const HeaderStyled = styled.header` + position: relative; + display: flex; + 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; + ` + : ''} +` + +type Props = { + height?: number, + marginTop?: number, +} + +export const HeaderGroup = styled.div` + 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; + 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` + 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; + 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); + + ${ModalWindow} { + min-width: 286px; + max-height: 290px; + background-color: #333333; + border-radius: 0px; + padding: 0; + overflow-y: auto; + + ${customScrollbar} + + ${isMobileDevice + ? css` + min-width: 280px; + max-height: 250px; + height: auto; + top: -140px; + ` + : ''}; + } +` +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 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 (orientation: landscape) { + font-size: 10px; + } + ` + : ''}; +` +export const ScBody = styled.div` + display: flex; + flex-direction: column; + padding: 0 15px 23px 15px; +` + +type SportProps = { + active: boolean, +} +export const ScSport = styled.div` + 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; +` diff --git a/src/features/SportsFilter/index.tsx b/src/features/SportsFilter/index.tsx index 903b4fe4..16afd710 100644 --- a/src/features/SportsFilter/index.tsx +++ b/src/features/SportsFilter/index.tsx @@ -1,20 +1,40 @@ -import { T9n } from 'features/T9n' +import { useState } from 'react' -import { ScSportsFilter, ScArrow } from './styled' +import { useHeaderFiltersStore } from 'features/HeaderFilters' -type SportsFilterProps = { - onModalOpen: () => void, - open: boolean, - sport: string, -} +import { SelectSport } from './components/SelectSport' +import { SelectSportPopup } from './components/SelectSportPopup' + +export const SportsFilter = () => { + const { selectedSport, setSelectedSport } = useHeaderFiltersStore() + const [isOpen, setIsOpen] = useState(false) + + const onSportClick = (sport: string) => { + setSelectedSport(sport) + setIsOpen(false) + } -export const SportsFilter = ({ - onModalOpen, - open, - sport, -}: SportsFilterProps) => ( - - - - -) + const onModalOpen = () => { + setIsOpen(true) + } + + const onModalClose = () => { + setIsOpen(false) + } + + return ( + <> + + + + ) +}