function MainComponent() { const [searchText, setSearchText] = React.useState(''); const [uploadedItems, setUploadedItems] = React.useState([]); const [activeMenu, setActiveMenu] = React.useState('home'); const handleSearchChange = (event)=>{ setSearchText(event.target.value); }; const handleImageChange = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ const newItem = { id: uploadedItems.length + 1, dateTime: '日時認識中...', imageUrl: reader.result, name: '拾得画像認識中...', color: '色認識中...', shape: '形認識中...', feature: '特徴認識中...', brand: 'ブランド名認識中...' }; setUploadedItems([ ...uploadedItems, newItem ]); }; reader.readAsDataURL(file); } }; const submitFormOnClick = ()=>{ document.getElementById('imageInput').click(); }; const statistics = uploadedItems.filter((item)=>new Date(item.dateTime).getMonth() === new Date().getMonth()).length; const returnRate = uploadedItems.filter((item)=>new Date(item.dateTime).getMonth() === new Date().getMonth() && item.isReturned).length / statistics * 100 || 0; const todayItems = uploadedItems.filter((item)=>item.dateTime.startsWith(new Date().toISOString().split('T')[0])); const filteredItems = searchText ? uploadedItems.filter((item)=>item.name.includes(searchText) || item.feature.includes(searchText)) : uploadedItems; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#e0f2f1] flex", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-1/4 bg-[#222222] p-4 text-white flex flex-col", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "メニュー"), /*#__PURE__*/ React.createElement("button", { className: `px-3 py-2 rounded-lg text-white font-semibold mb-3 flex items-center ${activeMenu === 'home' ? 'bg-[#007bff]' : 'bg-gray-500'}`, onClick: ()=>setActiveMenu('home'), __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home mr-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), "ホーム"), /*#__PURE__*/ React.createElement("button", { className: `px-3 py-2 rounded-lg text-white font-semibold mb-3 flex items-center ${activeMenu === 'photo' ? 'bg-[#007bff]' : 'bg-gray-500'}`, onClick: ()=>{ submitFormOnClick(); setActiveMenu('photo'); }, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-camera mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), "写真を撮る"), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "検索...", className: "px-3 py-1.5 rounded-lg mb-3", value: searchText, onChange: handleSearchChange, name: "search", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageChange, className: "hidden", id: "imageInput", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `px-3 py-2 rounded-lg text-white font-semibold flex items-center ${activeMenu === 'list' ? 'bg-[#007bff]' : 'bg-gray-500'}`, onClick: ()=>setActiveMenu('list'), __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-list mr-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), "一覧")), /*#__PURE__*/ React.createElement("div", { className: "w-3/4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#222222] p-4 text-white flex justify-between items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#FF69B4]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Atta")), /*#__PURE__*/ React.createElement("main", { className: "p-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, activeMenu === 'home' && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-4 text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "今月の拾得物件数"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, statistics, " 件")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-4 text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "返却率"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, Math.round(returnRate), " %")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-4 text-center", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "今日のお渡し予定の拾得物"), todayItems.slice(0, 1).map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 21 }, __self: this }, "No. ", item.id, " 名称: ", item.name), /*#__PURE__*/ React.createElement("img", { src: item.imageUrl, alt: `今日のお渡し予定の${item.name}`, className: "mx-auto w-full max-w-xs", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }))))), activeMenu === 'list' && filteredItems.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "w-full max-w-xl bg-white shadow-lg rounded-lg p-6 my-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.imageUrl, alt: `拾得物の${item.name}`, className: "w-full max-w-sm h-40 object-cover rounded-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-lg text-gray-800 mb-2 mt-4", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "拾得日時: ", item.dateTime), /*#__PURE__*/ React.createElement("p", { className: "mb-1", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "名称: ", item.name), /*#__PURE__*/ React.createElement("p", { className: "mb-1", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "色: ", item.color), /*#__PURE__*/ React.createElement("p", { className: "mb-1", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "形: ", item.shape), /*#__PURE__*/ React.createElement("p", { className: "mb-1", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "特徴: ", item.feature), /*#__PURE__*/ React.createElement("p", { className: "mb-1", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "ブランド名: ", item.brand)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#222222] p-6 text-white text-center", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, "© 2023 Atta"))); }