Added Impressum, Datenschutz and Kontakt

package.json

@@ -12,10 +12,12 @@
     "@types/node": "^12.20.16",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
+    "html-react-parser": "^1.2.7",
     "node-sass": "^6.0.1",
     "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-markdown": "^6.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.3.5",

src/Router.tsx

@@ -3,6 +3,9 @@ import { BrowserRouter, Switch, Route } from "react-router-dom";
 import Footer from "./components/footer/Footer";
 import Header from "./components/header/Header";
 import Main from "./components/Main/Main";
+import Legal from "./components/Legal/Legal";
+import Privacy from "./components/Privacy/Privacy";
+import Contact from "./components/Contact/Contact";
 
 function Router() {
   return (
@@ -13,10 +16,13 @@ function Router() {
           <Main />
         </Route>
         <Route path="/datenschutz">
-          <h1>Datenschutz</h1>
+          <Privacy />
         </Route>
         <Route path="/impressum">
-          <h1>Impressum</h1>
+          <Legal />
+        </Route>
+        <Route path="/kontakt">
+          <Contact />
         </Route>
       </Switch>
       <Footer />

src/components/Categories/Categories.scss

@@ -0,0 +1 @@
+.Categories {}

src/components/Categories/Categories.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Categories.scss';
+
+const Categories = () => (
+  <div className="Categories">
+    Categories Component
+  </div>
+);
+
+export default Categories;

src/components/Contact/Contact.scss

@@ -0,0 +1,12 @@
+.Contact {
+  font-family: "PT Sans", sans-serif;
+  padding: 2rem 1rem;
+  .contact-title {
+    font-weight: bold;
+    font-size: 1.3rem;
+    padding-bottom: 2rem;
+  }
+  .contact-content {
+    padding-bottom: 6rem;
+  }
+}

src/components/Contact/Contact.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import "./Contact.scss";
+import ReactMarkdown from "react-markdown";
+import { url } from "../../variables";
+
+function Contact() {
+  const [{ title, content }, setContent] = useState({
+    title: "",
+    content: "",
+  });
+
+  useEffect(() => {
+    interface HomeProps {
+      title: string;
+      content: string;
+    }
+    const getContent = async (): Promise<HomeProps> => {
+      const response = await fetch(`${url}/contact`);
+      const data = await response.json();
+      setContent(data);
+      return data;
+    };
+
+    getContent().then();
+  }, []);
+  return (
+    <div className="Contact">
+      <h3 className="contact-title">{title}</h3>
+      <div className="contact-content">
+        <ReactMarkdown>{content}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}
+
+export default Contact;

src/components/Legal/Legal.scss

@@ -0,0 +1,12 @@
+.Legal {
+  font-family: "PT Sans", sans-serif;
+  padding: 1rem;
+  .legal-title {
+    font-weight: bold;
+    font-size: 1.3rem;
+    padding-bottom: 2rem;
+  }
+  .legal-content {
+    padding-bottom: 2rem;
+  }
+}

src/components/Legal/Legal.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import { url } from "../../variables";
+import "./Legal.scss";
+import ReactMarkdown from "react-markdown";
+
+function Legal() {
+  const [{ title, content }, setContent] = useState({
+    title: "",
+    content: "",
+  });
+
+  useEffect(() => {
+    interface HomeProps {
+      title: string;
+      content: string;
+    }
+    const getContent = async (): Promise<HomeProps> => {
+      const response = await fetch(`${url}/impressum`);
+      const data = await response.json();
+      setContent(data);
+      return data;
+    };
+
+    getContent().then();
+  }, []);
+
+  return (
+    <div className="Legal">
+      <h3 className="legal-title">{title}</h3>
+      <div className="legal-content">
+        <ReactMarkdown>{content}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}
+
+export default Legal;

src/components/Partners/Partners.scss

@@ -0,0 +1 @@
+.Partners {}

src/components/Partners/Partners.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Partners.scss';
+
+const Partners = () => (
+  <div className="Partners">
+    Partners Component
+  </div>
+);
+
+export default Partners;

src/components/Privacy/Privacy.scss

@@ -0,0 +1,12 @@
+.Privacy {
+  font-family: "PT Sans", sans-serif;
+  padding: 1rem;
+  .privacy-title {
+    font-weight: bold;
+    font-size: 1.3rem;
+    padding-bottom: 2rem;
+  }
+  .privacy-content {
+    padding-bottom: 2rem;
+  }
+}

src/components/Privacy/Privacy.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import { url } from "../../variables";
+import "./Privacy.scss";
+import ReactMarkdown from "react-markdown";
+
+function Privacy() {
+  const [{ title, content }, setContent] = useState({
+    title: "",
+    content: "",
+  });
+
+  useEffect(() => {
+    interface HomeProps {
+      title: string;
+      content: string;
+    }
+    const getContent = async (): Promise<HomeProps> => {
+      const response = await fetch(`${url}/datenschutz`);
+      const data = await response.json();
+      setContent(data);
+      return data;
+    };
+
+    getContent().then();
+  }, []);
+
+  return (
+    <div className="Privacy">
+      <h3 className="privacy-title">{title}</h3>
+      <div className="privacy-content">
+        <ReactMarkdown>{content}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}
+
+export default Privacy;

src/components/navigation/Navigation.tsx

@@ -45,17 +45,17 @@ function MobileNav() {
         >
           <MenuItem className="menu-item">
             <NavLink onClick={handleClose} exact to={"/"}>
-              Home
+              Startseite
             </NavLink>
           </MenuItem>
           <MenuItem className="menu-item">
-            <NavLink onClick={handleClose} to={"/impressum"}>
-              Impressum
+            <NavLink onClick={handleClose} to={"/kategorien"}>
+              Kategorien
             </NavLink>
           </MenuItem>
           <MenuItem className="menu-item">
-            <NavLink onClick={handleClose} to={"/datenschutz"}>
-              Datenschutz
+            <NavLink onClick={handleClose} to={"/partner"}>
+              Partner
             </NavLink>
           </MenuItem>
         </Menu>