Merge pull request #182 from CodeChefVIT/pdfViewer

feat: pdfviewer enchance and courousal faster

Author: Abh1noob

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

@@ -165,7 +165,6 @@ const PaperPage = async ({ params }: { params: { id: string } }) => {
             <div>
               {paper.subject} {paper.exam} {paper.slot} {paper.year}
             </div>
-            <ShareButton />
           </h1>
           <center>
             <PdfViewer

src/components/ShareButton.tsx

@@ -1,6 +1,13 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
 import { Copy } from "lucide-react";
 import toast from "react-hot-toast";
 import { FaShare } from "react-icons/fa";
@@ -9,50 +16,53 @@ import { Button } from "./ui/button";
 import { usePathname } from "next/navigation";
 
 export default function ShareButton() {
-    const [origin, setOrigin] = useState("");
+  const [origin, setOrigin] = useState("");
 
-    useEffect(() => {
-      if (typeof window !== "undefined") {
-        setOrigin(window.location.origin);
-      }
-    }, []);
-  
-    const pathname = usePathname();
-    const paperPath = origin + pathname;
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setOrigin(window.location.origin);
+    }
+  }, []);
+
+  const pathname = usePathname();
+  const paperPath = origin + pathname;
   return (
-      <Dialog>
-        <DialogTrigger>
-          <FaShare></FaShare>
-        </DialogTrigger>
-        <DialogContent className="max-w-96">
-          <DialogHeader>
-            <DialogTitle>Share Papers with your friends!</DialogTitle>
-            <DialogDescription>
-              Either scan the QR or copy the link and share
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex flex-col items-center justify-center gap-5">
-            <QR url={paperPath}></QR>
-            <Button
-              type="submit"
-              size="sm"
-              className="flex w-fit items-center justify-between gap-5 px-3"
-              onClick={async () => {
-                await toast.promise(
-                  navigator.clipboard.writeText(paperPath), // This is a promise
-                  {
-                    success: "Link copied successfully",
-                    loading: "Copying link...",
-                    error: "Error copying link",
-                  },
-                );
-              }}
-            >
-              <p>Copy Link To Clipboard</p>
-              <Copy />
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>
+          {" "}
+          <FaShare />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-96">
+        <DialogHeader>
+          <DialogTitle>Share Papers with your friends!</DialogTitle>
+          <DialogDescription>
+            Either scan the QR or copy the link and share
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col items-center justify-center gap-5">
+          <QR url={paperPath}></QR>
+          <Button
+            type="submit"
+            size="sm"
+            className="flex w-fit items-center justify-between gap-5 px-3"
+            onClick={async () => {
+              await toast.promise(
+                navigator.clipboard.writeText(paperPath), // This is a promise
+                {
+                  success: "Link copied successfully",
+                  loading: "Copying link...",
+                  error: "Error copying link",
+                },
+              );
+            }}
+          >
+            <p>Copy Link To Clipboard</p>
+            <Copy />
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }

src/components/StoredPapers.tsx

@@ -60,7 +60,7 @@ function StoredPapers() {
     return <Loader prop="m-10" />;
   }
 
-  const plugins = [Autoplay({ delay: 3000, stopOnInteraction: true })];
+  const plugins = [Autoplay({ delay: 5000, stopOnInteraction: true })];
 
   return (
     <div className="px-4">

src/components/pdfViewer.tsx

@@ -7,6 +7,7 @@ import { Download, ZoomIn, ZoomOut } from "lucide-react";
 import { Button } from "./ui/button";
 import { extractBracketContent } from "@/util/utils";
 import { downloadFile } from "./CatalogueContent";
+import ShareButton from "./ShareButton";
 
 // Set up PDF.js worker
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
@@ -88,17 +89,18 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
       </div>
 
       {/* Controls */}
-      <div className="mt-4 flex flex-col items-center gap-4 rounded-lg bg-[#160820] p-4 shadow sm:flex-row">
+      <div className="mt-4 flex flex-col items-center gap-4 rounded-lg bg-[#262635] p-4 shadow sm:flex-row">
         {/* Page Navigation */}
+        <ShareButton />
         <Button onClick={downloadPDF}><Download/></Button>
         <div className="flex items-center gap-2">
-          <button
+          <Button
             onClick={goToPreviousPage}
             disabled={pageNumber <= 1}
-            className="rounded bg-[#3d2075] px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a]"
+            className="rounded  px-3 py-1 disabled:opacity-50 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a]"
           >
             {"<"}
-          </button>
+          </Button>
           <input
             type="number"
             value={pageNumber}
@@ -108,32 +110,32 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
             className="w-16 rounded border p-1 text-center"
           />
           <span>of {numPages ?? 1}</span>
-          <button
+          <Button
             onClick={goToNextPage}
             disabled={pageNumber >= (numPages ?? 1)}
-            className="rounded bg-[#3d2075] px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a]"
+            className="rounded  disabled:opacity-50 px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a]"
           >
             {">"}
-          </button>
+          </Button>
         </div>
 
         {/* Zoom Controls */}
         <div className="flex items-center gap-2">
-          <button
+          <Button
             onClick={zoomOut}
             disabled={scale <= 0.25}
-            className="rounded bg-[#3d2075] px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
+            className="rounded  px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
           >
             <ZoomOut />
-          </button>
+          </Button>
           <span>{(scale * 100).toFixed(0)}%</span>
-          <button
+          <Button
             onClick={zoomIn}
             disabled={scale >= 3}
-            className="rounded bg-[#3d2075] px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
+            className="rounded  px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
           >
             {<ZoomIn />}
-          </button>
+          </Button>
         </div>
       </div>