Added pdf viewer component

src/components/Viewer/PdfViewerComponent.module.css

@@ -0,0 +1,21 @@
+.container {
+    display: flex;
+    width: 30em; /* Hardcoded as requested */
+    height: 50em; /* Hardcoded as requested */
+}
+
+/* This class will be used for rendering individual highlight areas */
+.highlightArea {
+    background-color: rgba(255, 255, 0, 0.4); /* Yellow with some transparency */
+    position: absolute; /* Crucial: Positions the highlight over the PDF content */
+    pointer-events: none; /* Allows mouse events to pass through to the PDF */
+    border-radius: 2px; /* Slightly rounded corners */
+}
+
+/* The 'brawl' class from your original CSS. It's not used for highlights in the new structure,
+   but kept as it was in your original file. */
+.brawl {
+    background-color: #111111;
+    fill: #111111;
+    padding: 10px;
+}

src/components/Viewer/PdfViewerComponent.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useMemo } from "react";
+import { SpecialZoomLevel, Viewer, Worker } from "@react-pdf-viewer/core";
+import { pageNavigationPlugin } from "@react-pdf-viewer/page-navigation";
+import { searchPlugin, SearchTargetPage } from "@react-pdf-viewer/search";
+
+import "@react-pdf-viewer/search/lib/styles/index.css";
+import "@react-pdf-viewer/core/lib/styles/index.css";
+import "@react-pdf-viewer/page-navigation/lib/styles/index.css";
+import "@react-pdf-viewer/zoom/lib/styles/index.css";
+import "@react-pdf-viewer/highlight/lib/styles/index.css";
+
+import styles from "./PdfViewerComponent.module.css";
+
+interface PdfViewerComponentProps {
+  pdfUrl: string;
+  initialPage?: number;
+  textToHighlight?: string;
+}
+
+const PdfViewerComponent = (props: PdfViewerComponentProps) => {
+  const pageNavigationPluginInstance = pageNavigationPlugin();
+  const searchPluginInstance = searchPlugin();
+
+  const { pdfUrl, textToHighlight, initialPage = 0 } = props;
+
+  const handleSearch = () => {
+    if (!textToHighlight || textToHighlight.trim() === "") {
+      return;
+    }
+
+    searchPluginInstance.setTargetPages(
+      (targetPage: SearchTargetPage) => targetPage.pageIndex === initialPage,
+    );
+
+    searchPluginInstance.highlight({
+      keyword: textToHighlight,
+      matchCase: false,
+    });
+  };
+
+  return (
+    <div className={styles.container}>
+      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
+        <Viewer
+          enableSmoothScroll={true}
+          fileUrl={pdfUrl}
+          plugins={[pageNavigationPluginInstance, searchPluginInstance]}
+          defaultScale={SpecialZoomLevel.PageFit}
+          initialPage={initialPage}
+          onDocumentLoad={handleSearch}
+        />
+      </Worker>
+    </div>
+  );
+};
+export default PdfViewerComponent;