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
|
/** @jsx jsx */
/** @global location */
import { css, jsx, Global } from "@emotion/core";
import {
BrowserRouter as Router,
Route,
Switch
} from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import LandingPage from "./pages/LandingPage";
import colors from "./colors";
import FormPage from "./pages/FormPage";
const globalStyles = css`
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&display=swap');
@font-face {
font-family: 'Uni Sans';
src: url(fonts/unisans.otf) format('opentype');
}
body {
background-color: ${colors.notQuiteBlack};
color: white;
font-family: "Hind", "Helvetica", "Arial", sans-serif;
margin: 0;
}
.fade-enter,
.fade-exit {
position: absolute;
top: 0;
left: 0;
transition: 300ms ease-in-out opacity, 300ms ease-in-out transform;
width: 100%;
}
.fade-enter,
.fade-exit-active {
opacity: 0;
transform: scale(0.9);
}
.fade-enter-active {
opacity: 1;
z-index: 1;
transform: scale(1);
}
`;
const routes = [
{ path: "/", Component: LandingPage },
{ path: "/form", Component: FormPage}
]
function App() {
return (
<div>
<Global styles={globalStyles}/>
<Router>
<Route render={({ location }) => (
<TransitionGroup>
<CSSTransition
key={location.pathname}
classNames="fade"
timeout={300}
>
<Switch location={location}>
{routes.map(({path, Component}) => (
<Route exact path={path} component={Component}/>
))}
</Switch>
</CSSTransition>
</TransitionGroup>
)}/>
</Router>
</div>
);
};
export default App;
|
