forked from webclinic017/passiv-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
WelcomePage.tsx
39 lines (36 loc) · 1.32 KB
/
WelcomePage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React from 'react';
import styled from '@emotion/styled';
import { useDispatch, useSelector } from 'react-redux';
import ShadowBox from '../styled/ShadowBox';
import { push } from 'connected-react-router';
import { H1DarkStyle, H2DarkStyle, VerticalPadding } from '../styled/Setup';
import OnboardingProgress from '../components/OnboardingProgress';
import { Button } from '../styled/Button';
import { selectShowProgressFeature } from '../selectors/features';
const ScalingIFrame = styled.iframe`
width: 100%;
`;
const WelcomePage = () => {
const showProgressFeature = useSelector(selectShowProgressFeature);
const dispatch = useDispatch();
return (
<ShadowBox background="#2a2d34">
<H1DarkStyle>Welcome to Passiv!</H1DarkStyle>
<H2DarkStyle>Here's a 3-minute video to help you get started</H2DarkStyle>
<VerticalPadding>
<ScalingIFrame
title="Passiv Basics"
width="575"
height="320"
src="https://player.vimeo.com/video/365762313"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen
></ScalingIFrame>
</VerticalPadding>
<Button onClick={() => dispatch(push('/app/connect'))}>Continue</Button>
{showProgressFeature && <OnboardingProgress step={1} />}
</ShadowBox>
);
};
export default WelcomePage;