Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Niloofar Sadeghi / convert stocks to ts #2521

Merged
merged 2 commits into from
Jan 26, 2022
Merged

Niloofar Sadeghi / convert stocks to ts #2521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e46b7c
convert stockes to ts
Jan 17, 2022
23190c6
fix stocks_banner type
Jan 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 38 additions & 23 deletions src/pages/landing/stocks/_dtrading.js → src/pages/landing/stocks/_dtrading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
import React from 'react'
import React, { ReactElement } from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { graphql, useStaticQuery } from 'gatsby'
import device from 'themes/device'
import { Container, Flex, SectionContainer } from 'components/containers'
import { Header, Text, QueryImage } from 'components/elements'

type ContentProps = {
margin_right: string
margin_left: string
}

type ImageWrapperProps = {
width: string
margin_right?: string
}

type RowProps = {
flex_direction: string
flex_direction_mobile: string
}

const StyledSection = styled(SectionContainer)`
background-color: var(--color-white);
padding: 40px 120px;
Expand All @@ -16,7 +30,7 @@ const StyledSection = styled(SectionContainer)`
const Wrapper = styled(Container)`
width: 100%;
`
const Content = styled.div`
const Content = styled.div<ContentProps>`
width: 689px;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -54,7 +68,7 @@ const MobileImageWrapper = styled(Container)`
}
`

const ImageWrapper = styled(Flex)`
const ImageWrapper = styled(Flex)<ImageWrapperProps>`
width: ${(props) => props.width};
margin-right: ${(props) => props.margin_right};

Expand All @@ -77,7 +91,8 @@ const StyledHeader = styled(Header)`
text-align: center;
}
`
const Row = styled.div`

const Row = styled.div<RowProps>`
flex-direction: ${(props) => props.flex_direction};
width: 100%;
display: flex;
Expand Down Expand Up @@ -145,14 +160,30 @@ const query = graphql`
}
}
`
const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {

type DTradingProps = {
contentMargin: string
reverse: boolean
setWidth: string
trading: TradingType[]
}

type TradingType = {
title: ReactElement
subtitle: ReactElement
image_name: string
image_alt: string
image_name_mobile?: string
}

const DTrading = ({ contentMargin, trading, reverse, setWidth }: DTradingProps) => {
const data = useStaticQuery(query)

return (
<StyledSection>
<Wrapper fd="column" ai="center">
{trading.map((item, index) => {
let is_even = reverse ? (index + 1) % 2 : index % 2
const is_even = reverse ? (index + 1) % 2 : index % 2
return (
<Row
flex_direction={!is_even ? 'row' : 'row-reverse'}
Expand All @@ -165,14 +196,6 @@ const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {
>
<StyledHeader type="display-title">{item.title}</StyledHeader>
<Text>{item.subtitle}</Text>
{two_title && (
<>
<StyledHeader type="page-title" mt="2.4rem">
{item.second_title}
</StyledHeader>
<Text>{item.second_subtitle}</Text>
</>
)}
</Content>
{item.image_name_mobile && (
<ImageWrapper width={setWidth ? setWidth : '448px;'} ai="center">
Expand Down Expand Up @@ -209,12 +232,4 @@ const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {
)
}

DTrading.propTypes = {
contentMargin: PropTypes.string,
reverse: PropTypes.bool,
setWidth: PropTypes.string,
trading: PropTypes.array,
two_title: PropTypes.bool,
}

export default DTrading
49 changes: 27 additions & 22 deletions src/pages/landing/stocks/_footerBanner.js → src/pages/landing/stocks/_footerBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React from 'react'
import React, { ReactElement } from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import type { ImageDataLike } from 'gatsby-plugin-image'
import { Container, Flex } from 'components/containers'
import { Header, QueryImage } from 'components/elements'
import { LinkButton } from 'components/form'
import { localize } from 'components/localization'
// import Show from 'components/containers/show'
import device from 'themes/device.js'

const BannerWrapper = styled(Flex)`
Expand Down Expand Up @@ -128,19 +127,33 @@ const StyledHeaderSmall = styled(Header)`
}
`

const FooterBanner = ({ background_pattern, data, is_ppc, small_title, title }) => {
const BackgroundPattern = styled.img`
position: absolute;
top: -298px;
left: -8%;
z-index: 1;
width: 558px;
const BackgroundPattern = styled.img`
position: absolute;
top: -298px;
left: -8%;
z-index: 1;
width: 558px;

@media ${device.tabletL} {
display: none;
}
`
@media ${device.tabletL} {
display: none;
}
`

type FooterBannerProps = {
background_pattern: string
is_ppc: boolean
title: ReactElement
small_title: ReactElement
data: { stocks_banner: ImageDataLike }
}

const FooterBanner = ({
background_pattern,
data,
is_ppc,
small_title,
title,
}: FooterBannerProps) => {
return (
<BannerWrapper>
<MainWrapper>
Expand Down Expand Up @@ -194,12 +207,4 @@ const FooterBanner = ({ background_pattern, data, is_ppc, small_title, title })
)
}

FooterBanner.propTypes = {
background_pattern: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
data: PropTypes.object.isRequired,
is_ppc: PropTypes.bool,
small_title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
}

export default FooterBanner
21 changes: 20 additions & 1 deletion src/pages/landing/stocks/_headerSection.js → src/pages/landing/stocks/_headerSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const MainWrapper = styled(Flex)`
flex-direction: column;
overflow: hidden;
`

const HeaderWrapper = styled(Flex)`
position: relative;
overflow: hidden;
Expand All @@ -53,6 +54,7 @@ const TopHeaderWrapper = styled(Container)`
margin-top: 41px;
}
`

const BackgroundPattern = styled.img`
position: absolute;
top: 30%;
Expand All @@ -70,6 +72,7 @@ const BackgroundPattern = styled.img`
height: 224px;
}
`

const BackgroundPatternSection = styled.img`
width: 679px;
position: absolute;
Expand All @@ -80,6 +83,7 @@ const BackgroundPatternSection = styled.img`
display: none;
}
`

const TopHeaderTextDiv = styled(Flex)`
width: 690px;
margin-right: 24px;
Expand All @@ -91,6 +95,7 @@ const TopHeaderTextDiv = styled(Flex)`
margin-right: 0;
}
`

const TopTextWrapper = styled(Flex)`
flex-direction: column;
margin-bottom: 26%;
Expand All @@ -99,17 +104,20 @@ const TopTextWrapper = styled(Flex)`
margin-bottom: 0;
}
`

const StyledLinkButton = styled(LinkButton)`
border: unset;
line-height: 20px;
`

const StyledHeader = styled(Header)`
margin-bottom: 16px;
@media ${device.tabletL} {
font-size: 40px;
margin-bottom: 8px;
}
`

const StyledHeaderSmall = styled(Header)`
font-size: 24px;
max-width: 58rem;
Expand All @@ -120,10 +128,12 @@ const StyledHeaderSmall = styled(Header)`
max-width: 100%;
}
`

const BtnDiv = styled(Flex)`
height: unset;
justify-content: start;
`

const TopHeaderBgDiv = styled(Flex)`
width: 486px;
@media ${device.tabletL} {
Expand All @@ -133,22 +143,26 @@ const TopHeaderBgDiv = styled(Flex)`
position: relative;
}
`

const TopHeaderImgWrapper = styled(Flex)`
align-items: flex-end;
`

const DesktopImageWrapper = styled(Container)`
width: 100%;
@media ${device.tabletL} {
display: none;
}
`

const MobileImageWrapper = styled(Container)`
display: none;
@media ${device.tabletL} {
display: flex;
width: 100%;
}
`

const SectionWrapper = styled(Container)`
height: 704px;
flex-direction: row;
Expand All @@ -163,6 +177,7 @@ const SectionWrapper = styled(Container)`
flex-direction: column-reverse;
}
`

const SectionImgWrapper = styled(Flex)`
width: 487px;
@media ${device.laptopM} {
Expand All @@ -173,6 +188,7 @@ const SectionImgWrapper = styled(Flex)`
justify-content: center;
}
`

const SectionImgDiv = styled.div`
width: 100%;
position: relative;
Expand All @@ -181,6 +197,7 @@ const SectionImgDiv = styled.div`
max-width: 58.8rem;
}
`

const SectionBannerImg = styled.img`
width: 100%;
position: absolute;
Expand All @@ -193,6 +210,7 @@ const SectionBannerImg = styled.img`
margin: 0 auto;
}
`

const SectionTextWrapper = styled(Flex)`
width: 588px;
align-items: center;
Expand All @@ -210,6 +228,7 @@ const SectionTextWrapper = styled(Flex)`
margin: 0 auto;
}
`

const SectionStyledHeader = styled(Header)`
font-size: 64px;
text-align: left;
Expand All @@ -221,6 +240,7 @@ const SectionStyledHeader = styled(Header)`
margin-bottom: 8px;
}
`

const SectionStyledHeaderSmall = styled(Header)`
font-size: 24px;
max-width: 100%;
Expand All @@ -232,7 +252,6 @@ const SectionStyledHeaderSmall = styled(Header)`
text-align: center;
}
`
// const is_ppc = true

const HeaderSection = () => {
const data = useStaticQuery(query)
Expand Down
10 changes: 5 additions & 5 deletions src/pages/landing/stocks/_lazy-load.js → src/pages/landing/stocks/_lazy-load.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Loadable from '@loadable/component'

export const HeaderSection = Loadable(() => import('./_headerSection.js'))
export const DTrading = Loadable(() => import('./_dtrading.js'))
export const Parallelogram = Loadable(() => import('./_parallelogram.js'))
export const WhyTradeWithUs = Loadable(() => import('./_whyTradeWIthUs.js'))
export const FooterBanner = Loadable(() => import('./_footerBanner.js'))
export const HeaderSection = Loadable(() => import('./_headerSection'))
export const DTrading = Loadable(() => import('./_dtrading'))
export const Parallelogram = Loadable(() => import('./_parallelogram'))
export const WhyTradeWithUs = Loadable(() => import('./_whyTradeWIthUs'))
export const FooterBanner = Loadable(() => import('./_footerBanner'))
Loading