feat(api-docs, files): replace anchor tags with Link components for navigation

app/api-docs/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
+import Link from 'next/link';
 
 export default function ApiDocs() {
   useEffect(() => {
@@ -35,7 +36,7 @@ export default function ApiDocs() {
                   Interactive API documentation for file upload and management endpoints.
                 </p>
               </div>
-              <a
+              <Link
                 href="/"
                 className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
               >
@@ -53,7 +54,7 @@ export default function ApiDocs() {
                   />
                 </svg>
                 Back to Home
-              </a>
+              </Link>
             </div>
             <div
               id="api-reference"

app/components/filesTable.tsx

@@ -22,90 +22,6 @@ interface FileData {
   updatedAt: string;
 }
 
-const columns: ColumnDef<FileData>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <div className="px-6 py-3">
-        <input
-          type="checkbox"
-          checked={table.getIsAllPageRowsSelected()}
-          onChange={(e) => table.toggleAllPageRowsSelected(!!e.target.checked)}
-          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-        />
-      </div>
-    ),
-    cell: ({ row }) => (
-      <div className="px-6 py-4">
-        <input
-          type="checkbox"
-          checked={row.getIsSelected()}
-          onChange={(e) => row.toggleSelected(!!e.target.checked)}
-          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "filename",
-    header: "File Name",
-    cell: ({ row }) => (
-      <div className="font-medium text-gray-900">{row.getValue("filename")}</div>
-    ),
-  },
-  {
-    accessorKey: "mimetype",
-    header: "Type",
-    cell: ({ row }) => (
-      <div className="text-sm text-gray-600">{row.getValue("mimetype")}</div>
-    ),
-  },
-  {
-    accessorKey: "size",
-    header: "Size",
-    cell: ({ row }) => {
-      const bytes = row.getValue("size") as number;
-      if (bytes === 0) return "0 Bytes";
-      
-      const k = 1024;
-      const sizes = ["Bytes", "KB", "MB", "GB"];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-    },
-  },
-  {
-    accessorKey: "createdAt",
-    header: "Created",
-    cell: ({ row }) => {
-      const date = new Date(row.getValue("createdAt"));
-      return date.toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
-    },
-  },
-  {
-    accessorKey: "updatedAt",
-    header: "Updated",
-    cell: ({ row }) => {
-      const date = new Date(row.getValue("updatedAt"));
-      return date.toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
-    },
-  },
-];
-
 export function FilesTable() {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

app/files/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import Link from "next/link";
 import { UploadForm } from "../components/uploadForm";
 import { FilesTable } from "../components/filesTable";
 
@@ -36,18 +37,18 @@ export default function FilesPage() {
         </div>
         
         <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
+          <Link
             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
             href="/"
           >
             Back to Home
-          </a>
-          <a
+          </Link>
+          <Link
             className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
             href="/api-docs"
           >
             API Documentation
-          </a>
+          </Link>
         </div>
       </main>
     </div>