function MainComponent() { const [nameToLearningMap, setNameToLearningMap] = React.useState({}); const [age, setAge] = React.useState(''); const [learning, setLearning] = React.useState(''); const [name, setName] = React.useState(''); const handleAddLearning = (e)=>{ e.preventDefault(); const newEntry = { age, learning }; setNameToLearningMap((prev)=>({ ...prev, [name]: prev[name] ? [ ...prev[name], newEntry ] : [ newEntry ] })); setAge(''); setLearning(''); setName(''); }; const names = Object.keys(nameToLearningMap).sort(); const ageGroups = Array.from({ length: 21 }, (_, i)=>`${i}`); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "my-4 mx-auto p-4 w-full border rounded-lg shadow-lg bg-white", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "子供の学習ロードマップ (0歳 - 20歳)"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddLearning, className: "mb-8 grid grid-cols-4 gap-4 items-end", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), className: "border p-2 rounded col-span-1", placeholder: "名前", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", min: "0", max: "20", name: "age", value: age, onChange: (e)=>setAge(e.target.value), className: "border p-2 rounded col-span-1", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "learning", value: learning, onChange: (e)=>setLearning(e.target.value), className: "border p-2 rounded col-span-1", placeholder: "学習内容", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3498db] text-white p-2 rounded hover:bg-[#2980b9] transition-colors col-span-1", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-r border-t border-[#121212] py-2 px-4 sticky left-0 bg-white z-10", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "名前"), names.map((name, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "text-[#121212] border-r border-b border-[#121212] py-2 px-4", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, name))), /*#__PURE__*/ React.createElement("div", { className: "flex-auto overflow-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex min-w-max sticky top-0 bg-white z-10", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, ageGroups.map((age, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[200px] border-l border-t border-[#121212] px-4", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#121212] py-2", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, age)))), names.map((name, nameIndex)=>/*#__PURE__*/ React.createElement("div", { key: nameIndex, className: "flex min-w-max", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, ageGroups.map((age, ageIndex)=>/*#__PURE__*/ React.createElement("div", { key: ageIndex, className: "w-[200px] border-l border-b border-[#121212] px-4", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this }, nameToLearningMap[name]?.filter((entry)=>entry.age === age).map((item, itemIndex)=>/*#__PURE__*/ React.createElement("div", { key: itemIndex, className: "py-2 text-[#3498db]", __source: { fileName: "", lineNumber: 58, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "whitespace-normal break-words", style: { wordBreak: 'break-word', maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }, __source: { fileName: "", lineNumber: 59, columnNumber: 27 }, __self: this }, item.learning.slice(0, 40)))))))))))); }