feat(#2478): add smart banner for android
Andrei Dekterev
3 years ago
parent
4734987790
commit
91fca9f16f
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,55 @@ |
|||||||
|
import { Icon } from 'features/Icon' |
||||||
|
|
||||||
|
import { add } from 'date-fns' |
||||||
|
|
||||||
|
import { |
||||||
|
ScBannerWrap, |
||||||
|
ScIconLogo, |
||||||
|
ScTitleWrap, |
||||||
|
ScTitle, |
||||||
|
ScNameOfCompany, |
||||||
|
ScDescribe, |
||||||
|
ScBtnDownload, |
||||||
|
ScIconWrap, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
type SmartBannerProps = { |
||||||
|
setIsOpenDownload: (open: boolean) => void, |
||||||
|
} |
||||||
|
|
||||||
|
export const SmartBanner = ({ setIsOpenDownload }: SmartBannerProps) => ( |
||||||
|
<ScBannerWrap> |
||||||
|
<ScIconWrap> |
||||||
|
<Icon |
||||||
|
refIcon='Close' |
||||||
|
onClick={() => { |
||||||
|
localStorage.setItem( |
||||||
|
'dateLastOpenSmartBanner', |
||||||
|
JSON.stringify(add(new Date(), { days: 1 })), |
||||||
|
) |
||||||
|
setIsOpenDownload(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</ScIconWrap> |
||||||
|
<ScIconLogo src='/images/icon-instattv-smart-banner.svg' /> |
||||||
|
<ScTitleWrap> |
||||||
|
<ScTitle>official InStat TV app</ScTitle> |
||||||
|
<ScNameOfCompany>InStat TV limited</ScNameOfCompany> |
||||||
|
<ScDescribe>InStat – the Home of Sports Streaming</ScDescribe> |
||||||
|
</ScTitleWrap> |
||||||
|
<a |
||||||
|
href='https://play.google.com/store/apps/details?id=instat.ott' |
||||||
|
target='_blank' |
||||||
|
rel='noreferrer' |
||||||
|
onClick={() => { |
||||||
|
localStorage.setItem( |
||||||
|
'dateLastOpenSmartBanner', |
||||||
|
JSON.stringify(add(new Date(), { days: 1 })), |
||||||
|
) |
||||||
|
setIsOpenDownload(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
<ScBtnDownload>Download</ScBtnDownload> |
||||||
|
</a> |
||||||
|
</ScBannerWrap> |
||||||
|
) |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import styled from 'styled-components/macro' |
||||||
|
|
||||||
|
export const ScBannerWrap = styled.div` |
||||||
|
width: 100%; |
||||||
|
height: 78px; |
||||||
|
padding: 8px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
background: #f2f2f2; |
||||||
|
z-index: 10; |
||||||
|
|
||||||
|
> * { |
||||||
|
padding: 0 4px; |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
export const ScIconLogo = styled.img`` |
||||||
|
|
||||||
|
export const ScTitleWrap = styled.div` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 24px; |
||||||
|
text-transform: capitalize; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
justify-content: center; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScTitle = styled.span` |
||||||
|
font-size: 14px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScNameOfCompany = styled.span` |
||||||
|
font-size: 12px; |
||||||
|
color: rgba(0, 0, 0, 0.7); |
||||||
|
` |
||||||
|
export const ScDescribe = styled.span` |
||||||
|
font-size: 10px; |
||||||
|
line-height: 12px; |
||||||
|
color: rgba(0, 0, 0, 0.5); |
||||||
|
` |
||||||
|
|
||||||
|
export const ScBtnDownload = styled.span` |
||||||
|
color: #0076ff; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 24px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScIconWrap = styled.div` |
||||||
|
color: #747474; |
||||||
|
` |
||||||
Loading…
Reference in new issue