53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import { Row, Col } from '@freecodecamp/react-bootstrap';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { Spacer } from '../helpers';
|
|
import { randomQuote } from '../../utils/get-words';
|
|
|
|
import './welcome.css';
|
|
|
|
// created outside the function, so that the quotes don't change unless the
|
|
// page is reloaded.
|
|
|
|
const { quote, author } = randomQuote();
|
|
|
|
function Welcome({ name }) {
|
|
return (
|
|
<Fragment>
|
|
<Row>
|
|
<Col sm={10} smOffset={1} xs={12}>
|
|
<Spacer />
|
|
<h1 className='text-center big-heading'>
|
|
{name
|
|
? 'Welcome back, ' + name + '.'
|
|
: 'Welcome to freeCodeCamp.org'}
|
|
</h1>
|
|
</Col>
|
|
</Row>
|
|
<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>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
const propTypes = {
|
|
name: PropTypes.string
|
|
};
|
|
|
|
Welcome.propTypes = propTypes;
|
|
Welcome.displayName = 'Welcome';
|
|
|
|
export default Welcome;
|