aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/pages/instant/instant.tsx2
-rw-r--r--packages/website/ts/pages/instant/screenshots.tsx40
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>
+ );
+};