function MainComponent() { const [cards, setCards] = React.useState(()=>{ const initialCards = []; for(let i = 0; i < 500; i++){ initialCards.push({ word: `単語${i + 1}`, description: `説明${i + 1}` }); } return initialCards; }); const [popupContent, setPopupContent] = React.useState(null); const [searchTerm, setSearchTerm] = React.useState(''); const [currentPage, setCurrentPage] = React.useState(1); const handleCardClick = (card)=>{ setPopupContent(card); }; const handleClosePopup = ()=>{ setPopupContent(null); }; const filteredCards = cards.filter((card)=>card.word.toLowerCase().includes(searchTerm.toLowerCase())); const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; const itemsPerPage = 40; const totalPages = Math.ceil(filteredCards.length / itemsPerPage); const currentCards = filteredCards.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); const handlePreviousPage = ()=>{ if (currentPage > 1) { setCurrentPage(currentPage - 1); } }; const handleNextPage = ()=>{ if (currentPage < totalPages) { setCurrentPage(currentPage + 1); } }; const handleOtherWordClick = (index)=>{ setPopupContent(cards[index]); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen p-4 bg-white font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePreviousPage, className: "mr-4 p-2 bg-blue-500 text-white rounded text-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "前"), /*#__PURE__*/ React.createElement("button", { onClick: handleNextPage, className: "p-2 bg-blue-500 text-white rounded text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "次")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, placeholder: "検索...", onChange: handleSearchChange, className: "p-2 border border-gray-300 rounded-md w-[200px]", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-4 mt-16", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, currentCards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#fffdfa] p-4 shadow rounded cursor-pointer transition-transform transform hover:scale-105", onClick: ()=>handleCardClick(card), __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-lg font-bold", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, card.word)))), popupContent && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-lg w-[800px] relative max-h-[80vh] overflow-y-auto", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-3xl mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, popupContent.word), /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-lg mb-6", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, popupContent.description), /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-base underline mb-6 cursor-pointer", onClick: ()=>handleOtherWordClick((parseInt(popupContent.word.replace('単語', ''), 10) + 1) % 500), __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "別の単語の説明"), /*#__PURE__*/ React.createElement("button", { className: "absolute top-2 right-2 bg-blue-500 text-white px-4 py-2 rounded-full", onClick: handleClosePopup, __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "閉じる"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, ` .font-crimson-text { font-family: 'Crimson Text', serif; } .font-roboto { font-family: 'Roboto', sans-serif; } `)); }