1 | import React from 'react';
|
2 | import { Link } from 'react-router-dom';
|
3 | import './HomePage.css';
|
4 | import Banner from './Banner';
|
5 |
|
6 | const Home = () => (
|
7 | <div className="Home" data-test="home-container">
|
8 | <Banner />
|
9 | <div data-test="empty-div" />
|
10 | <h1 className="Home-header" data-test="main-heading">Home page</h1>
|
11 | <p className="Home-intro">
|
12 | <Link to="/other-page" data-test="rr-link">Go to other page by react router</Link>
|
13 | </p>
|
14 | <p><a href="/other-page" data-test="other-page-link">Go to other page with full page load</a></p>
|
15 | <p><a href="/other-page" data-test="other-page-link-new-tab" target="_blank">Go to other page in new tab</a></p>
|
16 | <p><Link to="/another-simple-page" data-test="another-simple-page-react-link">Go to another simple page</Link></p>
|
17 | <ul>
|
18 | <li data-test="list-item">bullet 1</li>
|
19 | <li data-test="list-item">bullet 2</li>
|
20 | <li data-test="list-item">bullet 3</li>
|
21 | </ul>
|
22 |
|
23 | <form action="" data-test="form" onSubmit={(e) => { global.location.href = 'http://localhost:3000/other-page'; e.preventDefault(); }}>
|
24 | <p><label>Name <input type="text" name="fullname" data-test="fullname" /></label></p>
|
25 | <p><label>Email <input type="text" name="email" data-test="email" defaultValue="hi@hello.com" /></label></p>
|
26 | <p><label>Hidden field <input type="text" name="hidden-field" data-test="hidden-field" style={{ display: 'none' }} /></label></p>
|
27 | <p>
|
28 | <label>Age
|
29 | <select name="age" data-test="age-field">
|
30 | <option value="18-25" data-test="age-18to25">18-25</option>
|
31 | <option value="26+" data-test="age-26plus">26+</option>
|
32 | </select>
|
33 | </label>
|
34 | </p>
|
35 | <fieldset>
|
36 | <legend>Gender</legend>
|
37 | <label>
|
38 | <input type="radio" name="gender" value="male" checked onChange={() => {}} data-test="male-radio" />
|
39 | Male
|
40 | </label>
|
41 | <label>
|
42 | <input type="radio" name="gender" value="female" data-test="female-radio" />
|
43 | Female
|
44 | </label>
|
45 | <label>
|
46 | <input type="radio" name="gender" value="other" data-test="other-gender-radio" />
|
47 | Other
|
48 | </label>
|
49 | </fieldset>
|
50 | <p>
|
51 | <label>
|
52 | <input type="checkbox" name="newsletter-uncheck" value="true" checked onChange={() => {}} data-test="newsletter-checkbox" />
|
53 | Uncheck if you don’t wish to not receive the newsletter
|
54 | </label>
|
55 | </p>
|
56 | <p>
|
57 | <label>
|
58 | <input type="checkbox" name="you-ok" value="ok" data-test="you-ok-checkbox" />
|
59 | Are you ok? Tick the box if so.
|
60 | </label>
|
61 | </p>
|
62 | <p><button data-test="submit-button">Submit Button</button></p>
|
63 | <p><button type="button" data-test="button">Button</button></p>
|
64 | <p><button type="button" disabled data-test="disabled-button">Disabled Button</button></p>
|
65 | </form>
|
66 | </div>
|
67 | );
|
68 |
|
69 | export default Home;
|