feat: add keys & bucket permissions management

src/pages/buckets/page.tsx

@@ -1,8 +1,8 @@
 import Page from "@/context/page-context";
 import { useBuckets } from "./hooks";
-import { Button, Input } from "react-daisyui";
-import { Plus } from "lucide-react";
+import { Input } from "react-daisyui";
 import BucketCard from "./components/bucket-card";
+import CreateBucketDialog from "./components/create-bucket-dialog";
 
 const BucketsPage = () => {
   const { data } = useBuckets();
@@ -15,10 +15,7 @@ const BucketsPage = () => {
         <div className="flex flex-row items-center gap-2">
           <Input placeholder="Search..." />
           <div className="flex-1" />
-          <Button color="primary">
-            <Plus />
-            Create Bucket
-          </Button>
+          <CreateBucketDialog />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 items-stretch mt-4 md:mt-8">