feat: add pinning modal

app/routes/file-manager/index.tsx

@@ -6,10 +6,19 @@ import {Input} from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import { AddIcon } from "~/components/icons";
 import { Authenticated } from "@refinedev/core";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { Field } from "~/components/forms";
 
 export default function FileManager() {
   return (
     <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
+      <Dialog>
         <GeneralLayout>
           <h1 className="font-bold mb-4 text-lg">File Manager</h1>
           <FileCardList>
@@ -50,15 +59,31 @@ export default function FileManager() {
               <AddIcon />
               Select All
             </Button>
+            <DialogTrigger asChild>
               <Button className="h-12 gap-x-2">
                 <AddIcon />
-          New Folder
+                Pin Content
               </Button>
+            </DialogTrigger>
           </div>
-      <DataTable
-        columns={columns}
-      />
+          <DataTable columns={columns} />
         </GeneralLayout>
+        <DialogHeader>
+          <DialogTitle>Pinning Contnet</DialogTitle>
+        </DialogHeader>
+        <DialogContent>
+          <form action="" className="w-full flex flex-col gap-y-4">
+            <Field
+              inputProps={{ name: "cids", placeholder: "Comma separated CIDs" }}
+              labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
+            />
+
+            <Button type="submit" className="w-full">
+              Pin Content
+            </Button>
+          </form>
+        </DialogContent>
+      </Dialog>
     </Authenticated>
   );
 }