♻️ refactor: org slug dashboard layout

packages/frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import OrgSlug from './pages/OrgSlug';
 import Projects from './pages/org-slug';
 import Settings from './pages/org-slug/Settings';
 import {
@@ -11,11 +10,12 @@ import {
 import ProjectSearchLayout from './layouts/ProjectSearch';
 import Index from './pages';
 import Login from './pages/Login';
+import { DashboardLayout } from 'pages/org-slug/layout';
 
 const router = createBrowserRouter([
   {
     path: ':orgSlug',
-    element: <OrgSlug />,
+    element: <DashboardLayout />,
     children: [
       {
         element: <ProjectSearchLayout />,

packages/frontend/src/pages/OrgSlug.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-
-import { OctokitProvider } from 'context/OctokitContext';
-import { Sidebar } from 'components/shared/Sidebar';
-
-const OrgSlug = () => {
-  return (
-    <div className="grid grid-cols-5 h-screen bg-snowball-50">
-      <>
-        <div className="h-full">
-          <Sidebar />
-        </div>
-        <div className="col-span-4 h-full p-3 overflow-y-hidden">
-          <div className="bg-white rounded-3xl h-full overflow-y-auto shadow-sm">
-            <OctokitProvider>
-              <Outlet />
-            </OctokitProvider>
-          </div>
-        </div>
-      </>
-    </div>
-  );
-};
-
-export default OrgSlug;

packages/frontend/src/pages/org-slug/layout.tsx

@@ -0,0 +1,31 @@
+import { Sidebar } from 'components/shared/Sidebar';
+import { OctokitProvider } from 'context/OctokitContext';
+import React, { ComponentPropsWithoutRef } from 'react';
+import { Outlet } from 'react-router-dom';
+import { cn } from 'utils/classnames';
+
+export interface DashboardLayoutProps
+  extends ComponentPropsWithoutRef<'section'> {}
+
+export const DashboardLayout = ({
+  className,
+  children,
+  ...props
+}: DashboardLayoutProps) => {
+  return (
+    <section
+      {...props}
+      className={cn('grid grid-cols-5 h-screen bg-snowball-50', className)}
+    >
+      <Sidebar />
+      <div className="col-span-4 h-full px-3 py-3 overflow-y-hidden">
+        <div className="rounded-3xl bg-base-bg h-full shadow-sm overflow-y-auto relative">
+          <OctokitProvider>
+            <Outlet />
+          </OctokitProvider>
+        </div>
+      </div>
+      {children}
+    </section>
+  );
+};