function MainComponent(props) { const { participants, onAddParticipant, onDragEnd, onDragStart, onRequestArrangement } = props; const ageColors = { "22秋": "bg-[#FF0000]", "23春": "bg-[#FFA500]", "23秋": "bg-[#FFFF00]", "24春": "bg-[#008000]" }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "飲席Creater"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, participants.map((participant, index)=>{ const ageColor = ageColors[participant.age] || "bg-gray-500"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center justify-between p-4 rounded-lg ${ageColor} text-white cursor-pointer`, draggable: true, onDragStart: (e)=>onDragStart(e, index), onDragEnd: (e)=>onDragEnd(e, index), __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "block", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, participant.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, participant.age)), /*#__PURE__*/ React.createElement("img", { src: participant.photo, alt: `Photo of ${participant.name}`, className: "w-20 h-20 object-cover rounded-full", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this })); })), /*#__PURE__*/ React.createElement("button", { className: "text-xl font-semibold px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition", onClick: onRequestArrangement, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "おまかせボタン")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: onAddParticipant, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "参加者名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "w-full p-2 rounded border", required: true, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "年代"), /*#__PURE__*/ React.createElement("select", { name: "age", className: "w-full p-2 rounded border", required: true, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "22秋", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "22秋"), /*#__PURE__*/ React.createElement("option", { value: "23春", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "23春"), /*#__PURE__*/ React.createElement("option", { value: "23秋", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "23秋"), /*#__PURE__*/ React.createElement("option", { value: "24春", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "24春"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "趣味"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "hobby", className: "w-full p-2 rounded border", required: true, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "顔写真"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "photo", className: "w-full p-2 rounded border", required: true, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "最近のエピソード"), /*#__PURE__*/ React.createElement("textarea", { name: "episode", className: "w-full p-2 rounded border", required: true, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-xl font-semibold px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "追加ボタン"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt text-4xl text-red-600", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const sampleParticipants = [ { name: "参加者1", age: "22秋", hobby: "趣味1", photo: "/images/photo1.jpg", episode: "エピソード1" }, { name: "参加者2", age: "23春", hobby: "趣味2", photo: "/images/photo2.jpg", episode: "エピソード2" } ]; const dummyAddParticipant = (e)=>{ e.preventDefault(); }; const dummyDragEnd = ()=>{}; const dummyDragStart = ()=>{}; const dummyRequestArrangement = ()=>{}; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 130, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { participants: sampleParticipants, onAddParticipant: dummyAddParticipant, onDragEnd: dummyDragEnd, onDragStart: dummyDragStart, onRequestArrangement: dummyRequestArrangement, __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this })); }