Initial commit

apps/web/components/layouts/dashboard/DashboardLayout.tsx

@@ -0,0 +1,35 @@
+import styles from "./DashboardLayout.module.css";
+import { Footer, Header, Sidebar } from "./layout-components";
+
+type DashboardLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <div
+      className={`grid h-screen text-muted-foreground ${styles.dashboardWrapper}`}
+    >
+      <div className={`hidden h-screen sm:block ${styles.dashboardSidebar}`}>
+        <Sidebar />
+      </div>
+      <div className={`grid overflow-auto ${styles.dashboardMain}`}>
+        <div
+          className={`fixed w-screen z-50 top-0 flex h-20 items-center border-b border-border bg-background/30 px-8 backdrop-blur ${styles.dashboardHeader}`}
+        >
+          <Header />
+        </div>
+        <div className={styles.dashboardContent}>
+          <div
+            className={`flex flex-col px-8 ${styles.dashboardContentWrapper}`}
+          >
+            {children}
+          </div>
+          <div className="px-8">
+            <Footer />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}