feat: pass document id as prop to the actions component

apps/web/src/app/(dashboard)/dashboard/page.tsx

@@ -84,8 +84,8 @@ export default async function DashboardPage() {
                   <TableCell>
                     <LocaleDate date={document.created} />
                   </TableCell>
-                  <TableCell>
-                    <ActionButtons />
+                  <TableCell className="flex cursor-pointer gap-6">
+                    <ActionButtons documentId={document.id} />
                   </TableCell>
                 </TableRow>
               ))}

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -63,7 +63,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
           {
             header: 'Actions',
             accessorKey: 'actions',
-            cell: () => <ActionButtons />,
+            cell: ({ row }) => <ActionButtons documentId={row.original.id} />,
           },
         ]}
         data={results.data}

apps/web/src/components/(dashboard)/table/actions-component.tsx

@@ -4,28 +4,28 @@ import React from 'react';
 
 import { Download, Edit, Trash } from 'lucide-react';
 
-export function ActionButtons() {
+export function ActionButtons({ documentId }: { documentId: number }) {
   return (
     <div className="flex cursor-pointer gap-6">
       <Edit
         size={18}
         color="#71717A"
         onClick={() => {
-          console.log('Edit Button');
+          console.log('Edit Document with id: ', documentId);
         }}
       />
       <Download
         size={18}
         color="#71717A"
         onClick={() => {
-          console.log('Download Button');
+          console.log('Download Document with id: ', documentId);
         }}
       />
       <Trash
         size={18}
         color="#71717A"
         onClick={() => {
-          console.log('Delete Button');
+          console.log('Delete Document with id: ', documentId);
         }}
       />
     </div>