diff --git a/package-lock.json b/package-lock.json
index c6e396f271f1e5919d7e29e9291f2aada5eaa685..ca058e54917e8c8c475b918691ed702263e8a792 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1047,6 +1047,29 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
+ "@emotion/is-prop-valid": {
+ "version": "0.8.8",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+ "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+ "requires": {
+ "@emotion/memoize": "0.7.4"
+ }
+ },
+ "@emotion/memoize": {
+ "version": "0.7.4",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+ },
+ "@emotion/stylis": {
+ "version": "0.8.5",
+ "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+ "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+ },
+ "@emotion/unitless": {
+ "version": "0.7.5",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+ },
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1663,6 +1686,21 @@
"@types/node": "*"
}
},
+ "@types/history": {
+ "version": "4.7.7",
+ "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.7.tgz",
+ "integrity": "sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==",
+ "dev": true
+ },
+ "@types/hoist-non-react-statics": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+ "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+ "requires": {
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0"
+ }
+ },
"@types/istanbul-lib-coverage": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
@@ -1723,8 +1761,7 @@
"@types/prop-types": {
"version": "15.7.3",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
- "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
- "dev": true
+ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
},
"@types/q": {
"version": "1.5.2",
@@ -1735,7 +1772,6 @@
"version": "16.9.43",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.43.tgz",
"integrity": "sha512-PxshAFcnJqIWYpJbLPriClH53Z2WlJcVZE+NP2etUtWQs2s7yIMj3/LDKZT/5CHJ/F62iyjVCDu2H3jHEXIxSg==",
- "dev": true,
"requires": {
"@types/prop-types": "*",
"csstype": "^2.2.0"
@@ -1750,11 +1786,58 @@
"@types/react": "*"
}
},
+ "@types/react-native": {
+ "version": "0.63.6",
+ "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.6.tgz",
+ "integrity": "sha512-qAv/VOyXAk4it9MOsQoyUjUnEJ3kAW1FCRGi0OvfQDKLH1/FFogVFvoB6xAlBNc6lPyBtCg+nvzj/ScYe0PqCQ==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
+ "@types/react-router": {
+ "version": "5.1.8",
+ "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.8.tgz",
+ "integrity": "sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==",
+ "dev": true,
+ "requires": {
+ "@types/history": "*",
+ "@types/react": "*"
+ }
+ },
+ "@types/react-router-dom": {
+ "version": "5.1.5",
+ "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.5.tgz",
+ "integrity": "sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==",
+ "dev": true,
+ "requires": {
+ "@types/history": "*",
+ "@types/react": "*",
+ "@types/react-router": "*"
+ }
+ },
"@types/stack-utils": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
"integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
},
+ "@types/styled-components": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.2.tgz",
+ "integrity": "sha512-HNocYLfrsnNNm8NTS/W53OERSjRA8dx5Bn6wBd2rXXwt4Z3s+oqvY6/PbVt3e6sgtzI63GX//WiWiRhWur08qQ==",
+ "requires": {
+ "@types/hoist-non-react-statics": "*",
+ "@types/react": "*",
+ "@types/react-native": "*",
+ "csstype": "^3.0.2"
+ },
+ "dependencies": {
+ "csstype": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz",
+ "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw=="
+ }
+ }
+ },
"@types/testing-library__dom": {
"version": "6.14.0",
"resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
@@ -2745,6 +2828,22 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
"integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
},
+ "babel-plugin-styled-components": {
+ "version": "1.11.1",
+ "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz",
+ "integrity": "sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==",
+ "requires": {
+ "@babel/helper-annotate-as-pure": "^7.0.0",
+ "@babel/helper-module-imports": "^7.0.0",
+ "babel-plugin-syntax-jsx": "^6.18.0",
+ "lodash": "^4.17.11"
+ }
+ },
+ "babel-plugin-syntax-jsx": {
+ "version": "6.18.0",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+ "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+ },
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3335,6 +3434,11 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
},
+ "camelize": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+ "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+ },
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4030,6 +4134,11 @@
"postcss": "^7.0.5"
}
},
+ "css-color-keywords": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+ "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+ },
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4120,6 +4229,16 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
+ "css-to-react-native": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+ "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+ "requires": {
+ "camelize": "^1.0.0",
+ "css-color-keywords": "^1.0.0",
+ "postcss-value-parser": "^4.0.2"
+ }
+ },
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -4252,8 +4371,7 @@
"csstype": {
"version": "2.6.13",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
- "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==",
- "dev": true
+ "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A=="
},
"cyclist": {
"version": "1.0.1",
@@ -14652,6 +14770,23 @@
}
}
},
+ "styled-components": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz",
+ "integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==",
+ "requires": {
+ "@babel/helper-module-imports": "^7.0.0",
+ "@babel/traverse": "^7.4.5",
+ "@emotion/is-prop-valid": "^0.8.8",
+ "@emotion/stylis": "^0.8.4",
+ "@emotion/unitless": "^0.7.4",
+ "babel-plugin-styled-components": ">= 1",
+ "css-to-react-native": "^3.0.0",
+ "hoist-non-react-statics": "^3.0.0",
+ "shallowequal": "^1.1.0",
+ "supports-color": "^5.5.0"
+ }
+ },
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
diff --git a/package.json b/package.json
index 85e908b666f6c6dea2b2532911156f35c78a6cdc..beadd1bdd63c89dda65804b7d50ccedb91002e41 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
"extends": "./eslintrc.js"
},
"dependencies": {
+ "@types/styled-components": "^5.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
@@ -52,6 +53,7 @@
"react-scripts": "3.4.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.88.2",
+ "styled-components": "^5.1.1",
"typescript": "^3.9.7"
},
"devDependencies": {
@@ -62,6 +64,7 @@
"@types/node": "^12.12.53",
"@types/react": "^16.9.43",
"@types/react-dom": "^16.9.8",
+ "@types/react-router-dom": "^5.1.5",
"@typescript-eslint/eslint-plugin": "^3.7.0",
"@typescript-eslint/parser": "^3.7.0",
"eslint": "^7.5.0",
diff --git a/public/favicon.ico b/public/favicon.ico
index bcd5dfd67cd0361b78123e95c2dd96031f27f743..dad93eef3b5009167cfc7e845d00932d6d58b81d 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 6a9f8c26bb7b9c041fa351ee3a7ee8fd9cf40690..678cb12482ad593ac63c85a3206165b84545d348 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,7 +21,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>React App</title>
+ <title>A Body KĂśr oldala</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/logo192.png b/public/logo192.png
index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..606d7605aff6203ef7c8f644f2a96c7eaa4d5112 100644
Binary files a/public/logo192.png and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6545bc15971f8f63fba70e4013df88a664..0000000000000000000000000000000000000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77ac21bb2ef88a6992b2b73ad93daaca92..0f3d0738418fddfa66efc0bd387f9a5a27aa7bc6 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
{
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "BodySCH App",
+ "name": "BodySCH KĂśr informĂĄciĂłs App",
"icons": [
{
"src": "favicon.ico",
@@ -11,11 +11,6 @@
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
- },
- {
- "src": "logo512.png",
- "type": "image/png",
- "sizes": "512x512"
}
],
"start_url": ".",
diff --git a/src/core/App.tsx b/src/core/App.tsx
index 7d6013ba313f4eadb7f9a48de30ae6e37310c0fb..ebed2efd7cd3c9fe7e9dc87e9c9f96982eac1d14 100644
--- a/src/core/App.tsx
+++ b/src/core/App.tsx
@@ -1,24 +1,32 @@
import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import styled from 'styled-components';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import MainRouting from './components/MainRouting';
+
+const Container = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+`;
+
+const MainContent = styled.div`
+ height: 100%;
+`;
function App() {
return (
- <div className="App">
- <header className="App-header">
- <p>
- Edit
- <code>src/App.tsx</code>
- and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
+ <Router>
+ <Container>
+ <Header />
+ <MainContent>
+ <MainRouting />
+ </MainContent>
+ <Footer />
+ </Container>
+ </Router>
);
}
diff --git a/src/core/components/Footer.tsx b/src/core/components/Footer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..000b6629c5ecc9bc2ac55a025aefdac03f0692b1
--- /dev/null
+++ b/src/core/components/Footer.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Footer = () => <div>Footer</div>;
+
+export default Footer;
diff --git a/src/core/components/Header.tsx b/src/core/components/Header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..11ab0b6937a7686ab6ed43ab54b8bf72f824ca90
--- /dev/null
+++ b/src/core/components/Header.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Header = () => <div>Header</div>;
+
+export default Header;
diff --git a/src/core/components/MainRouting.tsx b/src/core/components/MainRouting.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..882d03dd31c84c881e1648e00a21f0bc8d991c06
--- /dev/null
+++ b/src/core/components/MainRouting.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Route, Switch } from 'react-router';
+
+const Main = () => (
+ <Switch>
+ <Route path="/" exact>
+ Hello
+ </Route>
+ <Route path="/news">News</Route>
+ </Switch>
+);
+
+export default Main;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..06f062d46be0e706e86ea5a8f8db1430a661d57f
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,5 @@
+html,
+body,
+#root {
+ height: 100%;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 76d6f716405afea294f09e3f45dc7767c043e744..ac859f17e607615dc6ef51b02e16f64772603fa4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import 'semantic-ui-css/semantic.min.css';
import App from './core/App';
+import './index.css';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));