Browse Source

Added Impressum, Datenschutz and Kontakt

main
Philipp Lohner 10 months ago
parent
commit
8608edf162
  1. 844
      package-lock.json
  2. 2
      package.json
  3. 10
      src/Router.tsx
  4. 1
      src/components/Categories/Categories.scss
  5. 10
      src/components/Categories/Categories.tsx
  6. 12
      src/components/Contact/Contact.scss
  7. 36
      src/components/Contact/Contact.tsx
  8. 12
      src/components/Legal/Legal.scss
  9. 37
      src/components/Legal/Legal.tsx
  10. 1
      src/components/Partners/Partners.scss
  11. 10
      src/components/Partners/Partners.tsx
  12. 12
      src/components/Privacy/Privacy.scss
  13. 37
      src/components/Privacy/Privacy.tsx
  14. 10
      src/components/navigation/Navigation.tsx

844
package-lock.json generated

File diff suppressed because it is too large Load Diff

2
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",

10
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 />

1
src/components/Categories/Categories.scss

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

10
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;

12
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;
}
}

36
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;

12
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;
}
}

37
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;

1
src/components/Partners/Partners.scss

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

10
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;

12
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;
}
}

37
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;

10
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>

Loading…
Cancel
Save