Connect UI and Delete Action

Author: ThomasCode92

src/app/f/drive-contents.tsx

@@ -51,8 +51,9 @@ export default function DriveContents(props: {
           <div className="border-b border-gray-700 px-6 py-4">
             <div className="grid grid-cols-12 gap-4 text-sm font-medium text-gray-400">
               <div className="col-span-6">Name</div>
-              <div className="col-span-3">Type</div>
+              <div className="col-span-2">Type</div>
               <div className="col-span-3">Size</div>
+              <div className="col-span-1 text-right">Actions</div>
             </div>
           </div>
           <ul>

src/app/f/file-row.tsx

@@ -1,6 +1,8 @@
-import { FileIcon, Folder as FolderIcon } from "lucide-react";
+import { FileIcon, Folder as FolderIcon, Trash2Icon } from "lucide-react";
 import Link from "next/link";
 
+import { Button } from "~/components/ui/button";
+import { deleteFile } from "~/server/actions";
 import type { File, Folder } from "~/server/db/schema";
 
 export function FileRow(props: { file: File }) {
@@ -22,8 +24,17 @@ export function FileRow(props: { file: File }) {
             {file.name}
           </a>
         </div>
-        <div className="col-span-3 text-gray-400">{"file"}</div>
+        <div className="col-span-2 text-gray-400">{"File"}</div>
         <div className="col-span-3 text-gray-400">{file.size}</div>
+        <div className="col-span-1 text-right text-gray-400">
+          <Button
+            aria-label="Delete file"
+            variant="ghost"
+            onClick={() => deleteFile(file.id)}
+          >
+            <Trash2Icon className="" size={20} />
+          </Button>
+        </div>
       </div>
     </li>
   );