react-pdf-viewer-core

 import { Worker, Viewer } from "@react-pdf-viewer/core";

import "@react-pdf-viewer/core/lib/styles/index.css";

import "@react-pdf-viewer/default-layout/lib/styles/index.css";

import { useParams } from "react-router";

import Blogheader from "../health-blog-header/blog-header.tsx";

// Helper function to safely decode URL components

const safeDecode = (value?: string) => {

try {

return decodeURIComponent(value ?? "");

} catch (e) {

console.error("Invalid URI component:", value);

return value ?? "";

}

};

export default function BlogDetails() {

const { blogFile, description } = useParams();

const fileUrl = safeDecode(blogFile);

// const decodedDescription = safeDecode(description);

return (

<div>

{/* Top Navigation Bar */}

<Blogheader />

{/* PDF Viewer */}

<div>

<Worker workerUrl={`${window.location.origin}/pdf.worker.min.mjs`}>

<Viewer fileUrl={fileUrl} />

</Worker>

</div>

</div>

);

}