Browse Source

Added Kategorien, Partner and some logic

main
Philipp Lohner 10 months ago
parent
commit
d119f6e3fa
  1. 8
      src/Router.tsx
  2. 27
      src/components/Categories/Categories.scss
  3. 76
      src/components/Categories/Categories.tsx
  4. 37
      src/components/CategoryLink/CategoryLink.scss
  5. 39
      src/components/CategoryLink/CategoryLink.tsx
  6. 5
      src/components/Main/Main.tsx
  7. 11
      src/components/PartnerLink/PartnerLink.scss
  8. 17
      src/components/PartnerLink/PartnerLink.tsx
  9. 27
      src/components/Partners/Partners.scss
  10. 67
      src/components/Partners/Partners.tsx

8
src/Router.tsx

@ -6,6 +6,8 @@ import Main from "./components/Main/Main";
import Legal from "./components/Legal/Legal";
import Privacy from "./components/Privacy/Privacy";
import Contact from "./components/Contact/Contact";
import Categories from "./components/Categories/Categories";
import Partners from "./components/Partners/Partners";
function Router() {
return (
@ -15,6 +17,12 @@ function Router() {
<Route exact path="/">
<Main />
</Route>
<Route path="/kategorien">
<Categories />
</Route>
<Route path="/partner">
<Partners />
</Route>
<Route path="/datenschutz">
<Privacy />
</Route>

27
src/components/Categories/Categories.scss

@ -1 +1,26 @@
.Categories {}
.Categories {
font-family: "PT Sans", sans-serif;
padding: 1rem;
.categories-title {
font-weight: bold;
font-size: 1.3rem;
padding-bottom: 2rem;
}
.categories-content {
padding-bottom: 2rem;
}
.categories-list {
margin-bottom: 2rem;
}
.categories-button {
padding: 1rem;
background: var(--salmon-color);
border-radius: 1rem;
box-shadow: var(--box-shadow);
a {
color: var(--text-light-color);
font-weight: bold;
text-decoration: none;
}
}
}

76
src/components/Categories/Categories.tsx

@ -1,10 +1,70 @@
import React from 'react';
import './Categories.scss';
const Categories = () => (
<div className="Categories">
Categories Component
</div>
);
import React, { ReactElement, useEffect, useState } from "react";
import "./Categories.scss";
import { url } from "../../variables";
import { NavLink } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import PartnerLink from "../PartnerLink/PartnerLink";
import CategoryLink from "../CategoryLink/CategoryLink";
function Categories() {
const [{ title, content }, setContent] = useState({
title: "",
content: "",
});
const [categories, setCategories] = useState([]);
interface HomeProps {
title: string;
content: string;
}
interface CategoriesProps {
id: number;
title: string;
content: string;
url: string;
}
useEffect(() => {
const getContent = async (): Promise<HomeProps> => {
const response = await fetch(`${url}/category-intro`);
const data = await response.json();
setContent(data);
return data;
};
const getCategories = async (): Promise<CategoriesProps> => {
const response = await fetch(`${url}/categories`);
const data = await response.json();
setCategories(data);
return data;
};
getContent().then();
getCategories().then();
}, []);
return (
<div className="Categories">
<h3 className="categories-title">{title}</h3>
<div className="categories-content">
<ReactMarkdown>{content}</ReactMarkdown>
</div>
<div className="categories-list">
{categories.map((t: CategoriesProps): ReactElement => {
return (
<CategoryLink
key={t.id}
url={t.url}
title={t.title}
content={t.content}
/>
);
})}
</div>
<div className="categories-button">
<NavLink to={"/partner"}>Hier geht es zu unseren Partner*innen</NavLink>
</div>
</div>
);
}
export default Categories;

37
src/components/CategoryLink/CategoryLink.scss

@ -0,0 +1,37 @@
.CategoryLink {
.acc-main {
background: var(--campaign-color);
.acc-sum {
margin-top: .5rem;
color: white;
p {
font-family: "bereit", sans-serif;
font-weight: bold;
font-size: 1.5rem;
}
}
.acc-detail {
display: flex;
flex-direction: column;
color: white;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5);
p {
padding-bottom: 1rem;
}
}
}
.category-button {
padding: 1rem;
background: var(--salmon-color);
border-radius: 1rem;
box-shadow: var(--box-shadow);
a {
color: var(--text-light-color);
font-weight: bold;
text-decoration: none;
}
}
}

39
src/components/CategoryLink/CategoryLink.tsx

@ -0,0 +1,39 @@
import React from "react";
import "./CategoryLink.scss";
import { NavLink } from "react-router-dom";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
interface CategoryProps {
title: string;
content: string;
url: string;
}
const CategoryLink: React.FC<CategoryProps> = (category) => {
return (
<div className="CategoryLink">
<Accordion className="acc-main">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
className="acc-sum"
>
<Typography className="category-title">{category.title}</Typography>
</AccordionSummary>
<AccordionDetails className="acc-detail">
<Typography className="category-text">{category.content}</Typography>
<div className="category-button">
<a href={category.url}>Zur Datenquelle</a>
</div>
</AccordionDetails>
</Accordion>
</div>
);
};
export default CategoryLink;

5
src/components/Main/Main.tsx

@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { url } from "../../variables";
import "./Main.scss";
import { NavLink } from "react-router-dom";
import ReactMarkdown from "react-markdown";
function Main() {
const [{ title, content }, setContent] = useState({
@ -27,7 +28,9 @@ function Main() {
return (
<div className="Main">
<h3 className="main-title">{title}</h3>
<p className="main-content">{content}</p>
<div className="main-content">
<ReactMarkdown>{content}</ReactMarkdown>
</div>
<div className="main-button">
<NavLink to={"/kategorien"}>
Hier geht es zu den Kategoriebeschreibungen

11
src/components/PartnerLink/PartnerLink.scss

@ -0,0 +1,11 @@
.PartnerLink {
text-align: center;
font-weight: bold;
font-size: 1.4rem;
padding-bottom: .2rem;
a {
text-decoration: none;
color: var(--text-dark-color);
}
}

17
src/components/PartnerLink/PartnerLink.tsx

@ -0,0 +1,17 @@
import React from "react";
import "./PartnerLink.scss";
interface PartnerProps {
name: string;
url: string;
}
const PartnerLink: React.FC<PartnerProps> = (partner) => {
return (
<div className="PartnerLink">
<a href={partner.url}>{partner.name}</a>
</div>
);
};
export default PartnerLink;

27
src/components/Partners/Partners.scss

@ -1 +1,26 @@
.Partners {}
.Partners {
font-family: "PT Sans", sans-serif;
padding: 1rem;
.partners-title {
font-weight: bold;
font-size: 1.3rem;
padding-bottom: 2rem;
}
.partners-content {
padding-bottom: 2rem;
}
.partner-links {
margin-bottom: 2rem;
}
.partners-button {
padding: 1rem;
background: var(--salmon-color);
border-radius: 1rem;
box-shadow: var(--box-shadow);
a {
color: var(--text-light-color);
font-weight: bold;
text-decoration: none;
}
}
}

67
src/components/Partners/Partners.tsx

@ -1,10 +1,61 @@
import React from 'react';
import './Partners.scss';
const Partners = () => (
<div className="Partners">
Partners Component
</div>
);
import React, { ReactElement, useEffect, useState } from "react";
import "./Partners.scss";
import { url } from "../../variables";
import { NavLink } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import PartnerLink from "../PartnerLink/PartnerLink";
function Partners() {
const [{ title, content }, setContent] = useState({
title: "",
content: "",
});
const [partners, setPartners] = useState([]);
interface HomeProps {
title: string;
content: string;
}
interface PartnersProps {
id: number;
name: string;
url: string;
}
useEffect(() => {
const getContent = async (): Promise<HomeProps> => {
const response = await fetch(`${url}/partner-intro`);
const data = await response.json();
setContent(data);
return data;
};
const getPartners = async (): Promise<PartnersProps> => {
const response = await fetch(`${url}/partners`);
const data = await response.json();
setPartners(data);
return data;
};
getContent().then();
getPartners().then();
}, []);
return (
<div className="Partners">
<h3 className="partners-title">{title}</h3>
<div className="partners-content">
<ReactMarkdown>{content}</ReactMarkdown>
</div>
<div className="partner-links">
{partners.map((t: PartnersProps): ReactElement => {
return <PartnerLink key={t.id} url={t.url} name={t.name} />;
})}
</div>
<div className="partners-button">
<NavLink to={"/"}>Hier geht es zurück zur Startseite</NavLink>
</div>
</div>
);
}
export default Partners;

Loading…
Cancel
Save