diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index d7b7b586..9990cb70 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -12,6 +12,8 @@ export const indexLexics = { full_game: 13028, game_finished: 13026, game_time: 13029, + gender_female: 9648, + gender_male: 9647, goals: 13030, hide_score: 12982, highlights: 13033, diff --git a/src/features/Gender/index.tsx b/src/features/Gender/index.tsx new file mode 100644 index 00000000..a4695571 --- /dev/null +++ b/src/features/Gender/index.tsx @@ -0,0 +1,33 @@ +import React from 'react' + +import styled from 'styled-components/macro' + +import { Gender } from 'requests' + +import { T9n } from 'features/T9n' + +type Props = { + className?: string, + type: Gender, +} + +const lexics = { + [Gender.MALE]: 'gender_male', + [Gender.FEMALE]: 'gender_female', +} + +const GenderStyled = styled(T9n)` + ${({ type }) => ( + type === Gender.MALE + ? 'color: #1D4289;' + : 'color: #8D2F2F;' + )} +` + +export const GenderComponent = ({ className, type }: Props) => ( + +) diff --git a/src/features/ItemsList/index.tsx b/src/features/ItemsList/index.tsx index 415cdef8..a36273bd 100644 --- a/src/features/ItemsList/index.tsx +++ b/src/features/ItemsList/index.tsx @@ -4,6 +4,8 @@ import map from 'lodash/map' import { SportTypes } from 'config' +import { Gender } from 'requests' + import { SportName } from 'features/Common' import { useItemsList } from './hooks' @@ -16,6 +18,7 @@ import { StyledLink, TeamOrCountry, Wrapper, + GenderComponent, } from './styled' type SearchItemsListProps = { @@ -23,6 +26,7 @@ type SearchItemsListProps = { list: Array<{ color: string, fallbackImage: string, + gender?: Gender, id: number, logo: string, name: string, @@ -42,6 +46,7 @@ export const ItemsList = ({ close, list }: SearchItemsListProps) => { {map(list, ({ fallbackImage, + gender, id, logo, name, @@ -62,6 +67,7 @@ export const ItemsList = ({ close, list }: SearchItemsListProps) => { {teamOrCountry} + {gender && } ))} diff --git a/src/features/ItemsList/styled.tsx b/src/features/ItemsList/styled.tsx index 8c2dea79..3efb3e4b 100644 --- a/src/features/ItemsList/styled.tsx +++ b/src/features/ItemsList/styled.tsx @@ -2,6 +2,8 @@ import { Link } from 'react-router-dom' import styled from 'styled-components/macro' +import { GenderComponent as GenderBase } from 'features/Gender' + export const Wrapper = styled.ul` margin: 0; padding: 0; @@ -15,13 +17,14 @@ export const Item = styled.li` ` export const StyledLink = styled(Link)` + position: relative; display: flex; align-items: center; width: 100%; height: 56px; background-color: #666; - :focus-within, + :focus-within, :hover { background-color: #999; outline: none; @@ -29,6 +32,7 @@ export const StyledLink = styled(Link)` ` export const ItemInfo = styled.div` + width: 76%; line-height: 17px; ` @@ -36,6 +40,9 @@ export const Name = styled.div` font-size: 16px; font-weight: bold; color: #ccc; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; ` export const TeamOrCountry = styled.span` @@ -55,3 +62,15 @@ export const Logo = styled.img` width: 24px; height: 24px; ` + +export const GenderComponent = styled(GenderBase)` + position: absolute; + top: 50%; + right: 24px; + display: inline-block; + width: 18px; + transform: translateY(-50%); + font-size: 18px; + line-height: 21px; + text-align: center; +` diff --git a/src/features/LexicsStore/hooks/index.tsx b/src/features/LexicsStore/hooks/index.tsx index 93199015..6bf462f9 100644 --- a/src/features/LexicsStore/hooks/index.tsx +++ b/src/features/LexicsStore/hooks/index.tsx @@ -48,5 +48,5 @@ export const useLexics = () => { lang, suffix: getSuffix(lang), translate, - } + } as const } diff --git a/src/features/Search/hooks/useNormalizedItems.tsx b/src/features/Search/hooks/useNormalizedItems.tsx index ac010a17..14e545e8 100644 --- a/src/features/Search/hooks/useNormalizedItems.tsx +++ b/src/features/Search/hooks/useNormalizedItems.tsx @@ -40,6 +40,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => { return { color: getSportColor(sportType), fallbackImage, + gender: player.gender, id, logo, name: `${firstName} ${lastName}`, @@ -73,6 +74,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => { return { color: getSportColor(sportType), fallbackImage, + gender: team.gender, id, logo, name, @@ -106,6 +108,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => { return { color: getSportColor(sportType), fallbackImage, + gender: tournament.gender, id, logo, name, diff --git a/src/requests/getSearchItems.tsx b/src/requests/getSearchItems.tsx index 1ce42126..8569955e 100644 --- a/src/requests/getSearchItems.tsx +++ b/src/requests/getSearchItems.tsx @@ -7,7 +7,10 @@ import { callApi, getResponseData } from 'helpers' const proc = PROCEDURES.get_players_teams_tournaments -type Gender = 1 | 2 +export enum Gender { + MALE = 1, + FEMALE = 2, +} type Player = { firstname_eng: string,