67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import Header from "../components/Header";
|
|
import Cookies from "js-cookie";
|
|
import Sidebar from "../components/Sidebar";
|
|
import { ToastContainer } from "react-toastify";
|
|
import { AuthContext } from "../utils/context";
|
|
|
|
type LayoutProps = {
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
const Layout: React.FC<LayoutProps> = ({ children }) => {
|
|
const [loggedIn, setLoggedIn] = React.useState(false);
|
|
|
|
useEffect(() => {
|
|
const token = Cookies.get("token");
|
|
if (token) {
|
|
setLoggedIn(true);
|
|
} else {
|
|
setLoggedIn(false);
|
|
}
|
|
}, [loggedIn]);
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
|
|
<Header changeAuth={
|
|
(isLoggedIn: boolean) => setLoggedIn(isLoggedIn)
|
|
} />
|
|
<ToastContainer />
|
|
<div className="flex flex-1">
|
|
<AuthContext.Provider value={loggedIn}>
|
|
{/* Main content */}
|
|
{loggedIn && (
|
|
<>
|
|
<Sidebar />
|
|
<main className="flex-1 p-10 bg-white/80 dark:bg-gray-900/80 rounded-l-3xl shadow-2xl m-6 overflow-auto text-black dark:text-white">
|
|
{children}
|
|
</main>
|
|
</>
|
|
)}
|
|
</AuthContext.Provider>
|
|
</div>
|
|
<footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 text-blue-100 dark:text-gray-400 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700 dark:border-gray-800">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<span className="font-bold text-lg tracking-widest drop-shadow">
|
|
Bikelane Web
|
|
</span>
|
|
<span className="text-xs text-blue-200 dark:text-gray-500">
|
|
© {new Date().getFullYear()} —
|
|
<a
|
|
href="https://git.the1s.de/theis.gaedigk/bikelane"
|
|
className="underline hover:text-blue-300 dark:hover:text-white transition"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Gitea Repository
|
|
</a>
|
|
<span className="ml-1">| Fork me please 🚲</span>
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layout;
|