feat: add cluster & bucket management

src/app/router.tsx

@@ -1,8 +1,12 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { lazy } from "react";
 import AuthLayout from "@/components/layouts/auth-layout";
 import MainLayout from "@/components/layouts/main-layout";
-import ClusterPage from "@/pages/cluster/page";
-import HomePage from "@/pages/home/page";
+
+const ClusterPage = lazy(() => import("@/pages/cluster/page"));
+const HomePage = lazy(() => import("@/pages/home/page"));
+const BucketsPage = lazy(() => import("@/pages/buckets/page"));
+const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page"));
 
 const router = createBrowserRouter([
   {
@@ -21,6 +25,13 @@ const router = createBrowserRouter([
         path: "cluster",
         Component: ClusterPage,
       },
+      {
+        path: "buckets",
+        children: [
+          { index: true, Component: BucketsPage },
+          { path: ":id", Component: ManageBucketPage },
+        ],
+      },
     ],
   },
 ]);

src/app/styles.css

@@ -5,7 +5,13 @@
 @layer base {
   html,
   body {
-    @apply bg-base-200;
+    @apply bg-base-200 overflow-hidden;
+  }
+}
+
+@layer utilities {
+  .container {
+    @apply max-w-5xl;
   }
 }