From a4c6f28ce7736308133157c585241649aa705026 Mon Sep 17 00:00:00 2001
From: Amk Lass <lassanaa14@gmail.com>
Date: Sat, 6 Aug 2022 13:19:48 +0100
Subject: [PATCH] styles  setup

---
 App.css     | 34 ++++++++++++++++++++++++++++++++++
 App.js      | 40 ++++++++++++++++++++++++++++++++++++++++
 App.test.js | 13 +++++++++++++
 index.css   | 27 +++++++++++++++++++++++++++
 4 files changed, 114 insertions(+)
 create mode 100644 App.css
 create mode 100644 App.js
 create mode 100644 App.test.js
 create mode 100644 index.css

diff --git a/App.css b/App.css
new file mode 100644
index 0000000..e930de3
--- /dev/null
+++ b/App.css
@@ -0,0 +1,34 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  margin: 5vh;
+  padding: 0;
+  height: 90vh;
+}
+
+#root {
+  margin: 0;
+  padding: 0;
+}
+
+.header-container {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15vh;
+}
+
+nav {
+  display: flex;
+  gap: 10px;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+}
diff --git a/App.js b/App.js
new file mode 100644
index 0000000..75a8c10
--- /dev/null
+++ b/App.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import './App.css';
+import {
+  HashRouter as Router,
+  Routes,
+  Route,
+  Link,
+  Navigate,
+} from 'react-router-dom';
+import Home from './components/home';
+import Quote from './components/quote';
+import Calculator from './components/calculator';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class App extends React.Component {
+  render() {
+    return (
+      <Router>
+        <div className="header-container">
+          <h1>Math Magician</h1>
+          <nav>
+            <Link to="/">Home</Link>
+            <span> | </span>
+            <Link to="/calculator">Calculator</Link>
+            <span> | </span>
+            <Link to="/quote">Quote</Link>
+          </nav>
+        </div>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/calculator" element={<Calculator previous="" operand="" current="0" solved={false} />} />
+          <Route path="/quote" element={<Quote />} />
+          <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+      </Router>
+    );
+  }
+}
+
+export default App;
diff --git a/App.test.js b/App.test.js
new file mode 100644
index 0000000..625d675
--- /dev/null
+++ b/App.test.js
@@ -0,0 +1,13 @@
+import renderer from 'react-test-renderer';
+import App from './App';
+import Calculator from './components/calculator';
+
+test('renders learn react link', () => {
+  const tree = renderer.create(<App />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('renders learn react link', () => {
+  const tree = renderer.create(<Calculator />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..acbad23
--- /dev/null
+++ b/index.css
@@ -0,0 +1,27 @@
+body {
+  margin: 0;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Courier New',
+    monospace;
+}