function MainComponent() { const [company, setCompany] = React.useState(""); const [department, setDepartment] = React.useState(""); const [position, setPosition] = React.useState(""); const [name, setName] = React.useState(""); const [designPreview, setDesignPreview] = React.useState(false); const [settingsOpen, setSettingsOpen] = React.useState(false); const [uploadedImages, setUploadedImages] = React.useState({}); const [designLayout, setDesignLayout] = React.useState({ department: "", position: "", name: "" }); const companies = [ "つばさホールディングス", "つばさロジスティクス", "つばさモビリティ", "多摩フードサプライ", "折戸運送", "恵実物流" ]; const handleImageUpload = (e, company)=>{ const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setUploadedImages((prev)=>({ ...prev, [company]: reader.result })); }; reader.readAsDataURL(file); } }; const handleRegisterClick = ()=>{ setSettingsOpen(false); }; const handleLayoutChange = (e)=>{ setDesignLayout((prev)=>({ ...prev, [e.target.name]: e.target.value })); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans p-4 max-w-lg mx-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center py-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "名刺作成システム"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSettingsOpen(true), className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "設定")), !settingsOpen && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "会社名"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", value: company, onChange: (e)=>setCompany(e.target.value), __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "選択してください"), companies.map((comp, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: comp, __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, comp)))), company && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "部署"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", name: "department", value: department, onChange: (e)=>setDepartment(e.target.value), type: "text", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "役職名"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", name: "position", value: position, onChange: (e)=>setPosition(e.target.value), type: "text", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", name: "name", value: name, onChange: (e)=>setName(e.target.value), type: "text", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDesignPreview(true), className: "bg-green-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "プレビュー")), designPreview && /*#__PURE__*/ React.createElement("div", { className: "border p-4", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, "デザインプレビュー"), /*#__PURE__*/ React.createElement("img", { src: uploadedImages[company], alt: `${company}デザイン`, className: "w-full h-[200px] object-contain mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, `${company}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, `部署: ${department}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, `役職名: ${position}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, `氏名: ${name}`), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded mr-2", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, "ダウンロード"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDesignPreview(false), className: "bg-gray-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, "編集"))))), settingsOpen && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "設定ページ"), companies.map((comp, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, comp, "のデザイン画像をアップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>handleImageUpload(e, comp), __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 mt-4", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "部署位置"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", name: "department", value: designLayout.department, onChange: handleLayoutChange, type: "text", placeholder: "例: 左上", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 mt-4", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "役職名位置"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", name: "position", value: designLayout.position, onChange: handleLayoutChange, type: "text", placeholder: "例: 中央", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 mt-4", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "氏名位置"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border rounded", name: "name", value: designLayout.name, onChange: handleLayoutChange, type: "text", placeholder: "例: 右下", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded mr-2", onClick: handleRegisterClick, __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "登録"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white py-2 px-4 rounded", onClick: ()=>setSettingsOpen(false), __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "戻る")))); }