added footer component
This commit is contained in:
12
frontend/src/components/Footer.tsx
Normal file
12
frontend/src/components/Footer.tsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Footer: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<footer className="fixed bottom-0 left-0 text-sm w-full bg-slate-100 text-center py-2 border-t border-slate-200 z-50">
|
||||||
|
<p>Made with ❤️ by Theis Gaedigk - Jahrgang 2019</p>
|
||||||
|
<p>v1.1</p>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
@@ -1,4 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import Footer from "./Footer";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { loginUser } from "../utils/fetchData";
|
import { loginUser } from "../utils/fetchData";
|
||||||
import { myToast } from "../utils/toastify";
|
import { myToast } from "../utils/toastify";
|
||||||
@@ -66,6 +67,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
|
|||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@@ -2,6 +2,7 @@ import React from "react";
|
|||||||
import "../App.css";
|
import "../App.css";
|
||||||
import Header from "../components/Header";
|
import Header from "../components/Header";
|
||||||
import Sidebar from "../components/Sidebar";
|
import Sidebar from "../components/Sidebar";
|
||||||
|
import Footer from "../components/Footer";
|
||||||
|
|
||||||
type LayoutProps = {
|
type LayoutProps = {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
@@ -10,15 +11,13 @@ type LayoutProps = {
|
|||||||
|
|
||||||
const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
|
const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
|
||||||
return (
|
return (
|
||||||
<div className="h-screen overflow-hidden flex bg-slate-50 text-slate-800">
|
<div className="h-screen flex flex-col bg-slate-50 text-slate-800">
|
||||||
{/* Main */}
|
{/* Main */}
|
||||||
<main className="flex-1 min-h-0 overflow-hidden flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
|
<main className="flex-1 min-h-0 overflow-hidden flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8 pb-12">
|
||||||
{/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */}
|
|
||||||
<div className="w-full max-w-5xl flex flex-col gap-3 md:flex-row md:gap-6 md:items-stretch min-h-0 h-full">
|
<div className="w-full max-w-5xl flex flex-col gap-3 md:flex-row md:gap-6 md:items-stretch min-h-0 h-full">
|
||||||
<div className="hidden md:flex md:flex-col md:shrink-0 md:w-72 md:min-h-0 md:h-full">
|
<div className="hidden md:flex md:flex-col md:shrink-0 md:w-72 md:min-h-0 md:h-full">
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 min-w-0 min-h-0 h-full flex flex-col overflow-hidden">
|
<div className="flex-1 min-w-0 min-h-0 h-full flex flex-col overflow-hidden">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<Header onLogout={onLogout} />
|
<Header onLogout={onLogout} />
|
||||||
@@ -29,6 +28,7 @@ const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user