feat: enhance file handling and preview features

- Added new dependencies for file type handling and markdown support in package.json.
- Updated FileGrid component to use file extension for FilePreview.
- Refactored FilePreview component to determine file type based on extension, supporting various media types including images, audio, video, text, archives, and code files.
- Created a utility function getFileType to centralize MIME type determination based on file extensions.
- Updated API route to utilize the new getFileType function for serving files with correct MIME types.
- Added Tailwind CSS configuration with typography plugin for improved styling.

src/app/api/files/serv/route.ts

@@ -2,6 +2,7 @@ import { NextResponse } from "next/server";
 import path from "path";
 import { promises as fs } from "fs";
 import { db } from "~/server/db";
+import { getFileType } from "~/utils/fileType";
 
 export async function GET(req: Request) {
   const url = new URL(req.url);
@@ -27,25 +28,8 @@ export async function GET(req: Request) {
     // Read the file from the filesystem
     const fileBuffer = await fs.readFile(filePath);
 
-    const mimeType = file.extension === ".mp4"
-      ? "video/mp4"
-      : file.extension === ".webm"
-      ? "video/webm"
-      : file.extension === ".ogg"
-      ? "video/ogg"
-      : file.extension === ".jpg" || file.extension === ".jpeg"
-      ? "image/jpeg"
-      : file.extension === ".png"
-      ? "image/png"
-      : file.extension === ".gif"
-      ? "image/gif"
-      : file.extension === ".svg"
-      ? "image/svg+xml"
-      : file.extension === ".mp3"
-      ? "audio/mpeg"
-      : file.extension === ".wav"
-      ? "audio/wav"
-      : "application/octet-stream";
+    const mimeType = getFileType(path.extname(file.name)); // Get the MIME type based on the file extension
+
 
     // Return the file as a binary response
     return new Response(fileBuffer, {