added file name

Author: abhitrueprogrammer

src/app/paper/[id]/page.tsx

@@ -4,6 +4,7 @@ import Navbar from "@/components/Navbar";
 import PdfViewer from "@/components/pdfViewer";
 import Loader from "@/components/ui/loader";
 import { type ErrorResponse, type PaperResponse } from "@/interface";
+import { extractBracketContent } from "@/util/utils";
 import axios, { type AxiosResponse } from "axios";
 import { type Metadata } from "next";
 import { redirect } from "next/navigation"; // Import redirect
@@ -164,7 +165,7 @@ const PaperPage = async ({ params }: { params: { id: string } }) => {
             {paper.subject} {paper.exam} {paper.slot} {paper.year}
           </h1>
           <center>
-            <PdfViewer url={paper.finalUrl}></PdfViewer>
+            <PdfViewer url={paper.finalUrl} name={`${extractBracketContent(paper.subject)}-${paper.exam}-${paper.slot}-${paper.year}`}></PdfViewer>
           </center>
         </>
       )}

src/components/pdfViewer.tsx

@@ -23,17 +23,21 @@ import "@react-pdf-viewer/core/lib/styles/index.css";
 import "@react-pdf-viewer/zoom/lib/styles/index.css";
 import Link from "next/link";
 
-
-
 interface Params {
   params: { id: string };
 }
 
 interface PdfViewerProps {
   url: string;
+  name: string;
 }
-export default function PdfViewer({ url }: PdfViewerProps) {
-  const getFilePluginInstance = getFilePlugin();
+
+export default function PdfViewer({ url, name }: PdfViewerProps) {
+  const getFilePluginInstance = getFilePlugin({
+    fileNameGenerator: () => {
+      return name;
+    },
+  });
   const zoomPluginInstance = zoomPlugin();
   const { CurrentScale, ZoomIn, ZoomOut } = zoomPluginInstance;
   const fullScreenPluginInstance = fullScreenPlugin();
@@ -43,7 +47,7 @@ export default function PdfViewer({ url }: PdfViewerProps) {
 
   return (
     <div>
-      <div className="flex w-[95%] items-center justify-between bg-violet-400 dark:bg-gray-900 px-4 py-4 md:w-[80%]">
+      <div className="flex w-[95%] items-center justify-between bg-violet-400 px-4 py-4 dark:bg-gray-900 md:w-[80%]">
         <div className="flex gap-x-4">
           <ZoomOut>
             {(props: RenderZoomOutProps) => (