54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import "../App.css";
|
|
import { ToastContainer } from "react-toastify";
|
|
import Header from "../components/Header";
|
|
import Sidebar from "../components/Sidebar";
|
|
|
|
type LayoutProps = {
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
const Layout: React.FC<LayoutProps> = ({ children }) => {
|
|
return (
|
|
<div className="min-h-screen flex bg-gradient-to-r from-blue-50 via-white to-blue-100">
|
|
{/* Sidebar */}
|
|
<div className="hidden md:block">
|
|
<Sidebar />
|
|
</div>
|
|
|
|
{/* Main */}
|
|
<main className="flex-1 flex flex-col items-center py-10 px-4 md:py-14">
|
|
<div className="w-full max-w-3xl">
|
|
<Header />
|
|
</div>
|
|
<div className="w-full max-w-3xl bg-white/90 shadow-2xl rounded-3xl p-6 md:p-10 ring-1 ring-blue-100">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
|
|
{/* Mobile sidebar at bottom */}
|
|
<div className="fixed bottom-4 left-4 right-4 md:hidden z-10">
|
|
<div className="bg-white/95 backdrop-blur rounded-2xl shadow-xl ring-1 ring-blue-100 p-4">
|
|
<Sidebar />
|
|
</div>
|
|
</div>
|
|
|
|
<ToastContainer
|
|
position="top-right"
|
|
autoClose={3000}
|
|
hideProgressBar={false}
|
|
newestOnTop
|
|
closeOnClick
|
|
rtl={false}
|
|
pauseOnFocusLoss={false}
|
|
draggable
|
|
pauseOnHover
|
|
theme="light"
|
|
className="!z-50"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layout;
|