function MainComponent() { const [pdfs, setPdfs] = React.useState([ { id: 1, title: 'サンプルPDF', src: '/path-to-pdf-thumbnail.jpg' }, { id: 2, title: 'チュートリアルPDF', src: '/path-to-pdf-thumbnail.jpg' } ]); const [selectedPdf, setSelectedPdf] = React.useState(null); function handleAddPdf() { const newPdf = { id: pdfs.length + 1, title: `新しいPDF ${pdfs.length + 1}`, src: '/path-to-pdf-thumbnail.jpg' }; setPdfs([ ...pdfs, newPdf ]); } function handleReadPdf(pdf) { setSelectedPdf(pdf); } return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "PDFビュワー"), /*#__PURE__*/ React.createElement("button", { onClick: handleAddPdf, className: "bg-[#121212] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "本棚に追加")), /*#__PURE__*/ React.createElement("main", { className: "p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, pdfs.map((pdf)=>/*#__PURE__*/ React.createElement("div", { key: pdf.id, className: "bg-white p-2 shadow rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: pdf.src, alt: `${pdf.title}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, pdf.title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleReadPdf(pdf), className: "text-blue-500", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "読む"))))), selectedPdf && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow rounded w-[90vw] h-[90vh] flex flex-col", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, selectedPdf.title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPdf(null), className: "text-red-500 font-bold", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "閉じる")), /*#__PURE__*/ React.createElement("embed", { src: selectedPdf.src, type: "application/pdf", className: "w-full h-[80vh] mt-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this })))); }