Added Feature to Read PDFs

my-app/package.json

@@ -11,16 +11,19 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.1.8",
+    "@wojtekmaj/react-hooks": "^1.21.0",
     "framer-motion": "^11.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.3.0",
+    "react-pdf": "^9.1.1",
     "react-router-dom": "^6.26.2",
     "react-secure-storage": "^1.3.2",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1",
-    "toastify-js": "^1.12.0"
+    "toastify-js": "^1.12.0",
+    "vite-plugin-static-copy": "^1.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

my-app/src/App.jsx

@@ -8,6 +8,7 @@ import Events from "./pages/Events";
 import Base from "./layouts/Base";
 import Subscribe from "./components/Subscribe";
 import { useState } from "react";
+import NewsletterPage from "./pages/NewsletterPage";
 
 export default function App() {
   const [isVisible, setIsVisible] = useState(false);  
@@ -27,6 +28,7 @@ export default function App() {
             <Route path="/community" element={<Community />} />
             <Route path="/events" element={<Events />} />
             <Route path="/contact-us" element={<ContactForm />} />
+            <Route path="/newsletter" element={<NewsletterPage />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </Base>

my-app/src/pages/Community.jsx

@@ -288,8 +288,8 @@ export default function Community() {
                       "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
                       "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none",
                       selected
-                        ? "bg-white shadow"
-                        : "text-blue-100 hover:bg-white/[0.12] hover:text-white"
+                        ? "bg-white shadow "
+                        : "text-white hover:bg-white/[0.12] hover:text-blue-100"
                     )
                   }
                 >

my-app/src/pages/Events.jsx

@@ -170,7 +170,7 @@ export default function Events() {
                       "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none",
                       selected
                         ? "bg-white shadow"
-                        : "text-blue-100 hover:bg-white/[0.12] hover:text-white"
+                        : " text-white hover:bg-white/[0.12] hover:text-blue-100"
                     )
                   }
                 >

my-app/src/pages/NewsletterPage.jsx

@@ -0,0 +1,86 @@
+import { pdfjs } from "react-pdf";
+import { useCallback, useMemo, useState } from "react";
+import { Document, Page } from "react-pdf";
+import { useResizeObserver } from "@wojtekmaj/react-hooks";
+import "react-pdf/dist/esm/Page/AnnotationLayer.css";
+import "react-pdf/dist/esm/Page/TextLayer.css";
+import { IoChevronBack, IoChevronForward } from "react-icons/io5";
+
+import "../styles/newsletter.css";
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+const maxWidth = 800;
+const resizeObserverOptions = {};
+
+const NewsletterPage = () => {
+  const [numPages, setNumPages] = useState();
+  const [pageNumber, setPageNumber] = useState(1);
+  const [containerRef, setContainerRef] = useState(null);
+  const [containerWidth, setContainerWidth] = useState();
+
+  // Memoize the options object to prevent unnecessary reloads
+  const options = useMemo(
+    () => ({
+      cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
+    }),
+    []
+  );
+
+  const onDocumentLoadSuccess = ({ numPages }) => {
+    setNumPages(numPages);
+  };
+
+  const onResize = useCallback((entries) => {
+    const [entry] = entries;
+    if (entry) {
+      setContainerWidth(entry.contentRect.width);
+    }
+  }, []);
+
+  useResizeObserver(containerRef, resizeObserverOptions, onResize);
+
+  const forward = () => {
+    if (pageNumber + 1 <= numPages) setPageNumber(pageNumber + 1);
+  };
+
+  const backward = () => {
+    if (pageNumber - 1 >= 1) setPageNumber(pageNumber - 1);
+  };
+
+  return (
+    <div className="text-white flex flex-col justify-center">
+      <div className="flex justify-center">
+        <div className="flex justify-center gap-12">
+          <button onClick={backward}><IoChevronBack size={25} /></button>
+          {pageNumber} of {numPages}
+          <button onClick={forward}><IoChevronForward size={25} /></button>
+        </div>
+      </div>
+      <div>
+        <div className="Example__container__document mx-auto" ref={setContainerRef}>
+          <Document
+            file={"Newsletter.pdf"}
+            onLoadSuccess={onDocumentLoadSuccess}
+            options={options}
+          >
+            <Page
+              pageNumber={pageNumber}
+              width={
+                containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth
+              }
+            />
+          </Document>
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <div className="flex justify-center gap-12">
+          <button onClick={backward}><IoChevronBack size={25} /></button>
+          {pageNumber} of {numPages}
+          <button onClick={forward}><IoChevronForward size={25} /></button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewsletterPage;

my-app/src/styles/newsletter.css

@@ -0,0 +1,51 @@
+.Example input,
+.Example button {
+  font: inherit;
+}
+
+.Example header {
+  background-color: #323639;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  padding: 20px;
+  color: white;
+}
+
+.Example header h1 {
+  font-size: inherit;
+  margin: 0;
+}
+
+.Example__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px 0;
+  padding: 10px;
+}
+
+.Example__container__load {
+  margin-top: 1em;
+  color: white;
+}
+
+.Example__container__document {
+  width: 100%;
+  max-width: calc(100% - 2em);
+  margin: 1em 0;
+}
+
+.Example__container__document .react-pdf__Document {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.Example__container__document .react-pdf__Page {
+  margin: 1em 0;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+}
+
+.Example__container__document .react-pdf__message {
+  padding: 20px;
+  color: white;
+}