function MainComponent() { const [modalUrl, setModalUrl] = React.useState(''); const [modalTitle, setModalTitle] = React.useState(''); const [isOpen, setIsOpen] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const [thumbnails, setThumbnails] = React.useState({}); const docUrls = [ "https://archive.org/details/SpiritualFrontiersFellowshipNewsletterVol3No1", "https://archive.org/details/SpiritualFrontiersFellowshipNewsletterVol4No3" ]; const extensions = [ { name: "View PDF", ext: ".pdf" }, { name: "View Theatre Version", ext: "?view=theater" }, { name: "FULL TEXT", ext: "_djvu.txt" }, { name: "1 Page", ext: "/mode/1up" }, { name: "2 Page", ext: "/mode/2up" }, { name: "Thumbnails", ext: "/mode/thumb" }, { name: "Full Screen", ext: "/mode/1up?view=theater" } ]; React.useEffect(()=>{ async function fetchThumbnails() { setIsLoading(true); try { const messages = docUrls.map((url)=>{ const fileName = url.split('/').pop(); return { role: 'system', content: fileName }; }); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: messages, system_prompt: 'Generate thumbnail URLs' }) }); const data = await response.json(); if (data.status) { setThumbnails(data.result); // Assuming the API returns a mapped object of file names to thumbnail URLs } } catch (e) { console.error(e); } finally{ setIsLoading(false); } } fetchThumbnails(); }, []); const openModal = (url, title)=>{ setModalUrl(url); setModalTitle(title); setIsOpen(true); }; const closeModal = ()=>{ setIsOpen(false); }; const changeIframeSrc = (ext)=>{ setModalUrl((currentUrl)=>currentUrl.split('?')[0].split('.pdf')[0] + ext); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-scroll space-x-4 p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, docUrls.map((url)=>/*#__PURE__*/ React.createElement("div", { key: url, className: "flex-shrink-0", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://archive.org/services/img/${url.split('/').pop()}`, alt: `Thumbnail for document titled "${url.split('/').pop()}"`, className: "h-[200px] object-cover cursor-pointer", onClick: ()=>openModal(url, url.split('/').pop()), __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })))), isOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-[#333333] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] w-full max-w-4xl h-full", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: modalUrl, title: modalTitle, className: "w-full h-[80vh]", frameBorder: "0", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, extensions.map(({ name, ext })=>/*#__PURE__*/ React.createElement("button", { key: ext, className: "font-roboto text-white bg-transparent border border-[#FFA500] px-4 py-2", onClick: ()=>changeIframeSrc(ext), __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, name)), /*#__PURE__*/ React.createElement("button", { className: "absolute top-0 right-0 m-4 font-roboto text-white bg-[#FFA500] rounded-full p-2", onClick: closeModal, __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "🛑")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, ` @media (max-width: 640px) { .responsive-modal { width: 100vw; height: 90vh; } } `)); }