fix(#2526): create highlights page with form and price information
Andrei Dekterev
4 years ago
parent
453f30f8d1
commit
72ef0c71c1
@ -0,0 +1,15 @@ |
||||
export const highlightsPageLexic = { |
||||
add_summary: 18360, |
||||
background_music: 18359, |
||||
choose_player: 18362, |
||||
get_highlights: 18355, |
||||
highlight_will_be_generated: 18364, |
||||
matches_highlight: 419, |
||||
maximal_duration: 18358, |
||||
player_highlight: 630, |
||||
price: 18356, |
||||
purchase_auto_generated: 18363, |
||||
sport_highlight: 15115, |
||||
team_highlight: 657, |
||||
watch_demo: 18357, |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
export const Search = () => ( |
||||
<svg |
||||
width='100%' |
||||
height='100%' |
||||
viewBox='0 0 25 25' |
||||
fill='none' |
||||
xmlns='http://www.w3.org/2000/svg' |
||||
> |
||||
<circle cx='10.5' cy='10.5' r='9' stroke='#999999' strokeWidth='3' /> |
||||
<rect |
||||
x='18.0607' |
||||
y='15.9393' |
||||
width='9.01471' |
||||
height='3' |
||||
rx='1.5' |
||||
transform='rotate(45 18.0607 15.9393)' |
||||
fill='#999999' |
||||
/> |
||||
</svg> |
||||
) |
||||
@ -0,0 +1,18 @@ |
||||
import { useEffect, useState } from 'react' |
||||
import { getSportList } from 'requests/getSportList' |
||||
|
||||
export const useHighlightsForm = () => { |
||||
const [sports, setSports] = useState<any>() |
||||
const players: any = [] |
||||
|
||||
console.log('sports', sports) |
||||
useEffect(() => { |
||||
getSportList().then(setSports) |
||||
// getTeams().then(teams)
|
||||
}, []) |
||||
return { |
||||
players, |
||||
sports, |
||||
// teams,
|
||||
} |
||||
} |
||||
@ -0,0 +1,114 @@ |
||||
import { Combobox } from 'features/Combobox' |
||||
import { Input } from 'features/Common' |
||||
import { T9n } from 'features/T9n' |
||||
import { useUserFavoritesStore } from 'features/UserFavorites/store' |
||||
|
||||
import { useHighlightsForm } from './hooks' |
||||
|
||||
import { |
||||
ScWrapper, |
||||
ScTitle, |
||||
ScText, |
||||
ScInputGroup, |
||||
ScForm, |
||||
ScInfoBlock, |
||||
} from './styled' |
||||
|
||||
const labelWidth = 180 |
||||
const wrapperHeight = 50 |
||||
|
||||
export const FormHighlights = () => { |
||||
const { sports } = useHighlightsForm() |
||||
const { playerHighlight } = useUserFavoritesStore() |
||||
|
||||
return ( |
||||
<ScWrapper> |
||||
<ScInfoBlock> |
||||
<ScTitle> |
||||
<T9n t='choose_player' /> |
||||
</ScTitle> |
||||
<ScText> |
||||
<T9n t='purchase_auto_generated' /><br /> |
||||
<T9n |
||||
t='highlight_will_be_generated' |
||||
className='highlight_will_be_generated' |
||||
/> |
||||
</ScText> |
||||
</ScInfoBlock> |
||||
<ScForm> |
||||
<ScInputGroup> |
||||
<Combobox |
||||
noSearch |
||||
selected |
||||
labelLexic='sport_highlight' |
||||
labelWidth={labelWidth} |
||||
value='123' |
||||
onSelect={() => console.log(123)} |
||||
options={sports} |
||||
maxLength={500} |
||||
withError={false} |
||||
wrapperHeight={wrapperHeight} |
||||
/> |
||||
<Input |
||||
value='Team' |
||||
labelLexic='team_highlight' |
||||
autoComplete='family-name' |
||||
labelWidth={labelWidth} |
||||
onChange={() => console.log('lkdsmfkl')} |
||||
iconName='Search' |
||||
maxLength={500} |
||||
withError={false} |
||||
wrapperHeight={wrapperHeight} |
||||
/> |
||||
<Input |
||||
value='Player' |
||||
labelLexic='player_highlight' |
||||
autoComplete='family-name' |
||||
labelWidth={labelWidth} |
||||
onChange={() => console.log('lkdsmfkl')} |
||||
iconName='Search' |
||||
maxLength={500} |
||||
withError={false} |
||||
wrapperHeight={wrapperHeight} |
||||
/> |
||||
<Input |
||||
value='Player' |
||||
labelLexic='maximal_duration' |
||||
autoComplete='family-name' |
||||
labelWidth={labelWidth} |
||||
onChange={() => console.log('lkdsmfkl')} |
||||
maxLength={500} |
||||
withError={false} |
||||
wrapperHeight={wrapperHeight} |
||||
// pattern={'1'}
|
||||
labelAfter='min' |
||||
/> |
||||
<Combobox |
||||
noSearch |
||||
selected |
||||
labelLexic='background_music' |
||||
labelWidth={labelWidth} |
||||
value='123' |
||||
onSelect={() => console.log(123)} |
||||
options={[]} |
||||
maxLength={500} |
||||
withError={false} |
||||
wrapperHeight={wrapperHeight} |
||||
/> |
||||
<Combobox |
||||
noSearch |
||||
selected |
||||
labelLexic='add_summary' |
||||
labelWidth={labelWidth} |
||||
value='123' |
||||
onSelect={() => console.log(123)} |
||||
options={[]} |
||||
maxLength={500} |
||||
withError={false} |
||||
wrapperHeight={wrapperHeight} |
||||
/> |
||||
</ScInputGroup> |
||||
</ScForm> |
||||
</ScWrapper> |
||||
) |
||||
} |
||||
@ -0,0 +1,47 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
export const ScWrapper = styled.div` |
||||
max-width: 560px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
color: #FFFFFF; |
||||
padding: 0 40px; |
||||
` |
||||
export const ScInfoBlock = styled.div` |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
height: 186px; |
||||
` |
||||
|
||||
export const ScTitle = styled.span` |
||||
font-weight: 700; |
||||
font-size: 34px; |
||||
line-height: 40px; |
||||
/* margin-bottom: 15px; */ |
||||
` |
||||
|
||||
export const ScText = styled.div` |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
line-height: 28px; |
||||
` |
||||
|
||||
export const ScInputGroup = styled.div` |
||||
|
||||
.Search__input { |
||||
transform: translateY(50%); |
||||
} |
||||
` |
||||
export const ScForm = styled.form` |
||||
width: 100%; |
||||
max-width: 560px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
${isMobileDevice |
||||
? css` |
||||
` |
||||
: ''}; |
||||
` |
||||
@ -0,0 +1,33 @@ |
||||
import { ReactNode } from 'react' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { |
||||
ScCurrency, |
||||
ScPriceInfo, |
||||
ScTitle, |
||||
ScPrice, |
||||
ScWatchDemo, |
||||
} from './styled' |
||||
|
||||
type PriceInfoType = { |
||||
currency?: number, |
||||
price?: number, |
||||
} |
||||
|
||||
export const PriceInfo = ({ currency, price }: PriceInfoType) => ( |
||||
<ScPriceInfo> |
||||
<ScTitle> |
||||
<T9n t='price' /> |
||||
</ScTitle> |
||||
<ScPrice> |
||||
<ScCurrency> |
||||
{currency || '$'} |
||||
</ScCurrency> |
||||
{price} |
||||
</ScPrice> |
||||
<ScWatchDemo> |
||||
<T9n t='watch_demo' /> |
||||
</ScWatchDemo> |
||||
</ScPriceInfo> |
||||
) |
||||
@ -0,0 +1,43 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
export const ScPriceInfo = styled.div` |
||||
width: 188px; |
||||
height: 186px; |
||||
border: 1px solid #FFFFFF; |
||||
border-radius: 34px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-content: center; |
||||
color: #FFFFFF; |
||||
padding: 21px; |
||||
|
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
line-height: 28px; |
||||
|
||||
> * { |
||||
margin: 10px 0; |
||||
} |
||||
` |
||||
|
||||
export const ScTitle = styled.span` |
||||
text-align: center; |
||||
` |
||||
|
||||
export const ScPrice = styled.span` |
||||
font-size: 80px; |
||||
text-align: center; |
||||
` |
||||
|
||||
export const ScCurrency = styled.span` |
||||
font-size: 40px; |
||||
` |
||||
|
||||
export const ScWatchDemo = styled.span` |
||||
font-weight: 400; |
||||
text-align: center; |
||||
text-decoration: underline; |
||||
cursor: pointer; |
||||
flex-direction: row; |
||||
` |
||||
@ -0,0 +1,27 @@ |
||||
import { PriceInfo } from './components/PriceInfo' |
||||
import { FormHighlights } from './components/FormHighlights' |
||||
|
||||
import { |
||||
ScHeader, |
||||
ScHeaderLogo, |
||||
ScWrapper, |
||||
ScWrapperContent, |
||||
} from './styled' |
||||
|
||||
const HighlightsPage = () => { |
||||
console.log(123) |
||||
|
||||
return ( |
||||
<ScWrapper> |
||||
<ScHeader> |
||||
<ScHeaderLogo /> |
||||
</ScHeader> |
||||
<ScWrapperContent> |
||||
<PriceInfo price={0} /> |
||||
<FormHighlights /> |
||||
</ScWrapperContent> |
||||
</ScWrapper> |
||||
) |
||||
} |
||||
|
||||
export default HighlightsPage |
||||
@ -0,0 +1,27 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { Logo } from 'features/Logo' |
||||
|
||||
export const ScHeader = styled.div` |
||||
width: 100%; |
||||
max-height: 95px; |
||||
padding: 32px 36px; |
||||
background: linear-gradient(236.13deg, rgba(53, 96, 225, 0.56) -4.49%, rgba(0, 0, 0, 0) 98.29%), #000000; |
||||
` |
||||
|
||||
export const ScHeaderLogo = styled(Logo)` |
||||
` |
||||
|
||||
export const ScWrapper = styled.div` |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
` |
||||
|
||||
export const ScWrapperContent = styled.div` |
||||
display: flex; |
||||
flex-direction: row; |
||||
padding: 100px 170px 0px 170px; |
||||
` |
||||
Loading…
Reference in new issue