function MainComponent() { const [names, setNames] = React.useState([]); const [name, setName] = React.useState(''); const [groups, setGroups] = React.useState([]); const handleSubmit = (e)=>{ e.preventDefault(); if (names.length < 300 && name.trim()) { setNames([ ...names, name.trim() ]); setName(''); } }; const handleRandomizeGroups = ()=>{ let shuffledNames = names.sort(()=>0.5 - Math.random()); let tempGroups = [ [], [], [], [], [] ]; shuffledNames.forEach((name, index)=>{ tempGroups[index % 5].push(name); }); setGroups(tempGroups); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "名前リスト入力"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), className: "border p-2 rounded w-full", placeholder: "名前を入力", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 mt-2 rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "番号"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "名前"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, names.map((name, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, name)))))), /*#__PURE__*/ React.createElement("button", { onClick: handleRandomizeGroups, className: "bg-green-500 text-white px-4 py-2 mt-4 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "ランダムに班分け"), groups.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, groups.map((group, groupIndex)=>/*#__PURE__*/ React.createElement("div", { key: groupIndex, className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "班 ", groupIndex + 1), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, group.map((groupName, nameIndex)=>/*#__PURE__*/ React.createElement("li", { key: nameIndex, className: "py-1", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, groupName)))))))); }