diff options
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/ts/pages/instant/instant.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/screenshots.tsx | 40 |
2 files changed, 31 insertions, 11 deletions
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index 56d54cd06..8c0afa298 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -54,7 +54,7 @@ export class Instant extends React.Component<InstantProps, InstantState> { /> <Container backgroundColor={colors.instantPrimaryBackground} /> <Introducing0xInstant /> - <Screenshots /> + <Screenshots screenWidth={this.props.screenWidth} /> <Features screenWidth={this.props.screenWidth} /> <NeedMore screenWidth={this.props.screenWidth} /> <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx index 4c87f1a19..b0ea59470 100644 --- a/packages/website/ts/pages/instant/screenshots.tsx +++ b/packages/website/ts/pages/instant/screenshots.tsx @@ -1,15 +1,35 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { colors } from 'ts/style/colors'; +import { ScreenWidths } from 'ts/types'; -export const Screenshots = () => ( - <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center"> - <img className="px1" width="300px" height="420px" src="images/instant/snt_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/omg_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/kitty_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/bat_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/leroy_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/mkr_screenshot.png" /> - </Container> -); +export interface ScreenshotsProps { + screenWidth: ScreenWidths; +} + +export const Screenshots = (props: ScreenshotsProps) => { + const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + const images = isSmallScreen + ? [ + 'images/instant/omg_screenshot.png', + 'images/instant/kitty_screenshot.png', + 'images/instant/bat_screenshot.png', + ] + : [ + 'images/instant/snt_screenshot.png', + 'images/instant/omg_screenshot.png', + 'images/instant/kitty_screenshot.png', + 'images/instant/bat_screenshot.png', + 'images/instant/leroy_screenshot.png', + 'images/instant/mkr_screenshot.png', + ]; + return ( + <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center"> + {_.map(images, image => { + return <img className="px1" width="300px" height="420px" src={image} />; + })} + </Container> + ); +}; |