Skip to content

Commit 08db7a3

Browse files
jkettmannjkettmann
committed
Initial project
1 parent 6efc8ec commit 08db7a3

23 files changed

+455
-231
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@
66
"@testing-library/jest-dom": "^4.2.4",
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
9+
"normalize.css": "^8.0.1",
910
"react": "^16.13.1",
1011
"react-dom": "^16.13.1",
11-
"react-scripts": "3.4.1"
12+
"react-router-dom": "^5.2.0",
13+
"react-scripts": "3.4.1",
14+
"styled-components": "^5.1.1"
1215
},
1316
"scripts": {
1417
"start": "react-scripts start",

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27+
<link href="https://fonts.googleapis.com/css?family=Bitter|Montserrat:400,500,600&display=swap" rel="stylesheet">
2728
<title>React App</title>
2829
</head>
2930
<body>

‎src/App.css

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/App.js

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
2+
import { Switch, Route } from 'react-router-dom';
3+
import GlobalStyle from './GlobalStyle';
4+
import Header from './components/Header';
5+
import Home from './pages/Home';
46

57
function App() {
68
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
9+
<>
10+
<GlobalStyle />
11+
<Header />
12+
13+
<main>
14+
<Switch>
15+
<Route path="/how-it-works">
16+
<h1>How it works</h1>
17+
</Route>
18+
<Route path="/about">
19+
<h1>About</h1>
20+
</Route>
21+
<Route path="/">
22+
<Home />
23+
</Route>
24+
</Switch>
25+
</main>
26+
</>
2327
);
2428
}
2529

‎src/GlobalStyle.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { createGlobalStyle } from 'styled-components';
2+
3+
const GlobalStyle = createGlobalStyle`
4+
*, *::before, *::after {
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: "Montserrat", sans-serif;
10+
font-size: 16px;
11+
line-height: 1.69;
12+
color: #93918f;
13+
14+
h1, h2, h3, h4, h5, h6 {
15+
color: #000000;
16+
font-family: "Bitter", serif;
17+
font-weight: normal;
18+
text-align: center;
19+
}
20+
21+
h1 {
22+
font-size: 2.375em;
23+
}
24+
25+
h2 {
26+
font-size: 1.5em;
27+
}
28+
29+
a {
30+
color: #0087ff;
31+
}
32+
}
33+
`;
34+
35+
export default GlobalStyle;

‎src/components/Button/Button.style.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from 'styled-components';
2+
3+
export const Button = styled.button`
4+
height: 36px;
5+
line-height: 36px;
6+
padding: 0 16px;
7+
font-size: 14px;
8+
font-weight: 500;
9+
color: #ffffff;
10+
background: #fdb755;
11+
border: none;
12+
border-radius: 4px;
13+
cursor: pointer;
14+
text-transform: uppercase;
15+
`;

‎src/components/Button/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Button as default } from './Button.style';

‎src/components/Container/Container.style.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components';
2+
3+
export const Container = styled.div`
4+
width: 100%;
5+
max-width: 778px;
6+
margin: auto;
7+
padding: 0 20px;
8+
`;

‎src/components/Container/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Container as default } from './Container.style';

‎src/components/Header/Header.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { Container, Logo, NavLink } from './Header.style';
4+
5+
function Header() {
6+
return (
7+
<Container as="header">
8+
<Link to="/">
9+
<Logo />
10+
</Link>
11+
12+
<nav>
13+
<NavLink to="/how-it-works">
14+
How it works
15+
</NavLink>
16+
17+
<NavLink to="/about">
18+
About
19+
</NavLink>
20+
</nav>
21+
</Container>
22+
);
23+
}
24+
25+
export default Header;

0 commit comments

Comments
 (0)