Browse Source

Homepage added

main
Philipp Lohner 10 months ago
parent
commit
728e5db356
  1. 7
      src/Router.tsx
  2. 24
      src/components/Main/Main.scss
  3. 46
      src/components/Main/Main.tsx
  4. 2
      src/variables.ts

7
src/Router.tsx

@ -2,6 +2,7 @@ import React from "react";
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";
function Router() {
return (
@ -9,12 +10,12 @@ function Router() {
<Header />
<Switch>
<Route exact path="/">
<h1>HOME</h1>
<Main />
</Route>
<Route exact path="/datenschutz">
<Route path="/datenschutz">
<h1>Datenschutz</h1>
</Route>
<Route exact path="/impressum">
<Route path="/impressum">
<h1>Impressum</h1>
</Route>
</Switch>

24
src/components/Main/Main.scss

@ -1 +1,23 @@
.Main {}
.Main {
font-family: "PT Sans", sans-serif;
padding: 1rem;
.main-title {
font-weight: bold;
font-size: 1.3rem;
padding-bottom: 2rem;
}
.main-content {
padding-bottom: 2rem;
}
.main-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;
}
}
}

46
src/components/Main/Main.tsx

@ -1,10 +1,40 @@
import React from 'react';
import './Main.scss';
const Main = () => (
<div className="Main">
Main Component
</div>
);
import React, { useEffect, useState } from "react";
import { url } from "../../variables";
import "./Main.scss";
import { NavLink } from "react-router-dom";
function Main() {
const [{ title, content }, setContent] = useState({
title: "",
content: "",
});
useEffect(() => {
interface HomeProps {
title: string;
content: string;
}
const getContent = async (): Promise<HomeProps> => {
const response = await fetch(`${url}/home`);
const data = await response.json();
setContent(data);
return data;
};
getContent().then();
}, []);
return (
<div className="Main">
<h3 className="main-title">{title}</h3>
<p className="main-content">{content}</p>
<div className="main-button">
<NavLink to={"/kategorien"}>
Hier geht es zu den Kategoriebeschreibungen
</NavLink>
</div>
</div>
);
}
export default Main;

2
src/variables.ts

@ -1 +1 @@
export const url = "https://gruenes-quartett.de/";
export const url = "https://cms.gruenes-quartett.de";

Loading…
Cancel
Save