function MainComponent({ workerId, workerName, orderNo, notes }) { const [formData, setFormData] = React.useState({ workerId, workerName, orderNo, notes, photo: null }); const handleChange = (e)=>{ const { name, value, files } = e.target; if (name === "photo") { setFormData({ ...formData, photo: files[0] }); } else { setFormData({ ...formData, [name]: value }); } }; const handleSubmit = (e)=>{ e.preventDefault(); // Implement submit logic }; return /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4 p-4 bg-[#f9f9f9] rounded-md shadow-md w-[400px] font-sans", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "workerId", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "作業者ID"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "workerId", id: "workerId", value: formData.workerId, onChange: handleChange, className: "mt-1 block w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md bg-white text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "workerName", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "作業者名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "workerName", id: "workerName", value: formData.workerName, onChange: handleChange, className: "mt-1 block w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md bg-white text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "orderNo", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "指示NO"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "orderNo", id: "orderNo", value: formData.orderNo, onChange: handleChange, className: "mt-1 block w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md bg-white text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "notes", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "備考"), /*#__PURE__*/ React.createElement("textarea", { name: "notes", id: "notes", rows: "3", value: formData.notes, onChange: handleChange, className: "mt-1 block w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md bg-white text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "photo", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "写真の添付"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "photo", id: "photo", onChange: handleChange, className: "mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:bg-gray-100 file:rounded-md file:shadow-sm", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-4 py-2 bg-indigo-500 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "送信")); } function Menu() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 p-4 bg-white rounded-md shadow-md w-[200px] font-sans", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "店"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "作業"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "担当者"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "そのほか")); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 p-8 bg-gray-100 h-screen w-full justify-center items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { workerId: "12345", workerName: "山田太郎", orderNo: "56789", notes: "Lorem ipsum dolor sit amet.", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Menu, { __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); }