import { Outlet } from "react-router-dom";

import Sidebar from "../shared/components/layout/Sidebar";
import Header from "../shared/components/layout/Header";

export default function AppLayout() {
    return (
        <div className="flex h-screen overflow-hidden bg-slate-950">

            {/* Sidebar */}

            <Sidebar />

            {/* Content */}

            <div className="flex min-w-0 flex-1 flex-col">

                {/* Header */}

                <Header />

                {/* Workspace */}

                <main className="flex-1 overflow-y-auto bg-slate-950">

                    <div className="mx-auto w-full max-w-[1800px] p-8">

                        <Outlet />

                    </div>

                </main>

            </div>

        </div>
    );
}