function MainComponent({ emails, languagesStats, onLanguageClick, onUpdate }) { const emailSideClass = "w-1/2 h-screen overflow-y-scroll p-4 border"; const jobEmails = emails.filter((email)=>email.type === 'job'); const infoEmails = emails.filter((email)=>email.type === 'info'); return /*#__PURE__*/ React.createElement("div", { className: "flex w-full h-screen", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: emailSideClass, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "求人メール"), jobEmails.slice(0, 10).map((email, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-3 border", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, email.subject), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, email.snippet))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-blue-500 text-white", onClick: onUpdate, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "更新")), /*#__PURE__*/ React.createElement("div", { className: emailSideClass, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "採用情報"), infoEmails.slice(0, 10).map((email, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-3 border", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, email.subject), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, email.snippet))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-blue-500 text-white", onClick: onUpdate, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "更新")), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "プログラミング言語統計"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] relative", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, Object.entries(languagesStats).map(([language, count])=>/*#__PURE__*/ React.createElement("div", { key: language, className: "mb-2 cursor-pointer", onClick: ()=>onLanguageClick(language), __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, language), " : ", count))))); } function StoryComponent() { const emails = [ { subject: "Job 1", snippet: "Details about job 1", type: "job" }, { subject: "Job 2", snippet: "Details about job 2", type: "job" }, { subject: "Job 3", snippet: "Details about job 3", type: "job" }, { subject: "Job 4", snippet: "Details about job 4", type: "job" }, { subject: "Job 5", snippet: "Details about job 5", type: "job" }, { subject: "Info 1", snippet: "Details about info 1", type: "info" }, { subject: "Info 2", snippet: "Details about info 2", type: "info" }, { subject: "Info 3", snippet: "Details about info 3", type: "info" }, { subject: "Info 4", snippet: "Details about info 4", type: "info" }, { subject: "Info 5", snippet: "Details about info 5", type: "info" } ]; const languagesStats = { JavaScript: 3, Python: 5, Java: 2, Ruby: 1, PHP: 4, CSharp: 2 }; const handleLanguageClick = (language)=>{ console.log(`Language clicked: ${language}`); }; const handleUpdate = ()=>{ console.log("Update clicked"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { emails: emails, languagesStats: languagesStats, onLanguageClick: handleLanguageClick, onUpdate: handleUpdate, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); }