/
index.js
135 lines (130 loc) · 3.78 KB
/
index.js
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import React from 'react';
import PropTypes from 'prop-types';
import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
import { Row, Col } from '@freecodecamp/react-bootstrap';
import { apiLocation } from '../../../config/env.json';
import { randomQuote } from '../../utils/get-words';
import './intro.css';
const propTypes = {
complete: PropTypes.bool,
isSignedIn: PropTypes.bool,
name: PropTypes.string,
navigate: PropTypes.func,
pending: PropTypes.bool,
slug: PropTypes.string,
username: PropTypes.string
};
function Intro({
isSignedIn,
username,
name,
navigate,
pending,
complete,
completedChallengeCount,
slug
}) {
if (pending && !complete) {
return (
<>
<Spacer />
<Loader />
<Spacer />
</>
);
} else if (isSignedIn) {
const { quote, author } = randomQuote();
return (
<>
<Row>
<Col sm={10} smOffset={1} xs={12}>
<Spacer />
<h1 className='text-center big-heading'>
{name ? `Welcome back, ${name}.` : `Welcome to freeCodeCamp.org`}
</h1>
<Spacer />
</Col>
</Row>
<FullWidthRow className='button-group'>
<Link
className='btn btn-lg btn-primary btn-block'
to={`/${username}`}
>
View my Portfolio
</Link>
<Link className='btn btn-lg btn-primary btn-block' to='/settings'>
Update my account settings
</Link>
</FullWidthRow>
<Spacer />
<Row className='text-center quote-partial'>
<Col sm={10} smOffset={1} xs={12}>
<blockquote className='blockquote'>
<span>
<q>{quote}</q>
<footer className='quote-author blockquote-footer'>
<cite>{author}</cite>
</footer>
</span>
</blockquote>
</Col>
</Row>
<Row>
{completedChallengeCount < 15 ? (
<Col sm={10} smOffset={1} xs={12}>
<Spacer />
<h4>
If you are new to coding, we recommend you{' '}
<Link to={slug}>start at the beginning</Link>.
</h4>
</Col>
) : (
''
)}
</Row>
</>
);
} else {
return (
<>
<Row>
<Col sm={10} smOffset={1} xs={12}>
<Spacer />
<h1 className='big-heading text-center'>
Welcome to freeCodeCamp.org
</h1>
<Spacer />
<h2 className='medium-heading'>Learn to code.</h2>
<h2 className='medium-heading'>Build projects.</h2>
<h2 className='medium-heading'>Earn certifications.</h2>
<h2 className='medium-heading'>
Since 2014, more than 40,000 freeCodeCamp.org graduates have
gotten jobs at tech companies including:
</h2>
<div className='logo-row'>
<h2 className='medium-heading'>Apple</h2>
<h2 className='medium-heading'>Google</h2>
<h2 className='medium-heading'>Amazon</h2>
<h2 className='medium-heading'>Microsoft</h2>
<h2 className='medium-heading'>Spotify</h2>
</div>
</Col>
<Col md={6} mdOffset={3} sm={8} smOffset={2} xs={12}>
<button
className={'btn-cta-big signup-btn btn-cta center-block'}
onClick={() => {
navigate(`${apiLocation}/signin`);
}}
>
Sign in to save your progress (it's free)
</button>
</Col>
</Row>
<Spacer />
</>
);
}
}
Intro.propTypes = propTypes;
Intro.displayName = 'Intro';
export default Intro;