Merge remote-tracking branch 'origin/main' into production

components/pdfViewer.jsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { pdfjs, Document, Page } from 'react-pdf';
+
+// Set workerSrc to load PDF.js worker (important for performance)
+//pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
+const PDFJsViewer = ({ fileUrl }) => {
+    const [numPages, setNumPages] = useState(null);
+
+    function onDocumentLoadSuccess({ numPages }) {
+        setNumPages(numPages);
+        console.log("PDF pages: " + numPages);
+    }
+
+    return (
+        <div>
+            <Document
+                file={fileUrl}
+                onLoadSuccess={onDocumentLoadSuccess}
+                options={{ workerSrc: "https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js" }}
+            >
+                {Array.from(new Array(numPages), (el, index) => (
+                    <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+                ))}
+            </Document>
+        </div>
+    );
+};
+
+export default PDFJsViewer;

pages/guidelines.tsx

@@ -25,7 +25,7 @@ const PDFViewerPage = () => {
     };
 
     return (
-        <Layout>
+        <Layout><script src="https://mozilla.github.io/pdf.js/dist/pdf.js"></script>
             <h1 className="text-3xl font-bold">Напътствия</h1>
             <div className="guidelines-section mb-5 p-4 bg-gray-100 rounded-lg">
                 <h2 className="text-2xl font-semibold mb-3">Важни напътствия за службата</h2>
@@ -59,12 +59,23 @@ const PDFViewerPage = () => {
                         </React.Fragment>
                     ))}
                 </div>
-                <div style={{ width: 'calc(100% - 1rem)', height: '100%', margin: '0 0' }}> {/* Center the PDF with 2rem margin */}
-                    <object data={pdfFile} type="application/pdf" style={{ width: '100%', height: '100%' }}>
+                <p className="p-2 pb-5">
+                    <a href={pdfFile} className="text-blue-600 hover:text-blue-800 visited:text-purple-600 underline" target='_blank'>
+                        Свали Напътствията
+                    </a>
+                </p>
+
+                <div style={{ width: 'calc(100% - 1rem)', height: '100%', margin: '0 0' }}>
+                    <embed src={pdfFile} type="application/pdf" style={{ width: '100%', height: '100%' }} />
+                    {/* <object data={pdfFile} type="application/pdf" page="2" style={{ width: '100%', height: '100%' }}>
+
                         <p>Your browser does not support PDFs. Please download the PDF to view it: <a href={pdfFile}>Свали PDF файла</a>.</p>
                         <p>Вашият браузър не поддържа PDFs файлове. Моля свалете файла за да го разгледате: <a href={pdfFile}>Свали PDF файла</a>.</p>
-                    </object>
+                    </object> */}
                 </div>
+                {/* <iframe src={`https://docs.google.com/gview?url=${baseUrl}${pdfFile}&embedded=true`} style={{ width: '100%', height: '100%' }} frameBorder="0"></iframe> */}
+
+
             </div>
         </Layout >
     );