function DataEntryForm({ formTitle, fields }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[30%] border border-gray-400 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, formTitle), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, fields.map((field)=>/*#__PURE__*/ React.createElement("li", { key: field.name, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, field.label, /*#__PURE__*/ React.createElement("input", { className: "border border-gray-400 ml-2", name: field.name, __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }))))); } function DataEntryFormStory() { const fields = [ { name: "業者email", label: "業者email" }, { name: "物件名", label: "物件名" }, { name: "案件年数", label: "案件年数" }, { name: "年数", label: "年数" }, { name: "号室", label: "号室" }, { name: "㎡", label: "㎡" }, { name: "現賃料", label: "現賃料" }, { name: "管理費", label: "管理費" }, { name: "修繕金", label: "修繕金" }, { name: "備考", label: "備考" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DataEntryForm, { formTitle: "# 読み取り値", fields: fields, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function PurchaseStatusSection({ width, borderColor, title, options }) { return /*#__PURE__*/ React.createElement("div", { className: `w-${width} text-center border ${borderColor} p-4`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("select", { className: "border-2 border-gray-400 p-2 rounded", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, options.map((option, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: option.value, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, option.label)))); } function PurchaseStatusSectionStory() { const options = [ { value: "検討中", label: "検討中" }, { value: "購買済み", label: "購買済み" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PurchaseStatusSection, { width: "[40%]", borderColor: "border-gray-400", title: "購入ステータス", options: options, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const fields1 = [ { name: "利回り", label: "利回り" }, { name: "その他費用", label: "その他費用" } ]; const fields2 = [ { name: "業者email", label: "業者email" }, { name: "物件名", label: "物件名" }, { name: "案件年数", label: "案件年数" }, { name: "年数", label: "年数" }, { name: "号室", label: "号室" }, { name: "㎡", label: "㎡" }, { name: "現賃料", label: "現賃料" }, { name: "管理費", label: "管理費" }, { name: "修繕金", label: "修繕金" }, { name: "備考", label: "備考" } ]; const options = [ { value: "検討中", label: "検討中" }, { value: "購買済み", label: "購買済み" } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(PurchaseStatusSection, { width: "[20%]", borderColor: "border-gray-400", title: "Previous Page", options: options, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center text-xl font-bold font-crimson-text mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "物件詳細"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[30%] border border-gray-400 p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "検討のための情報"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-400 p-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "# 計算値"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "査定賃料"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(DataEntryForm, { formTitle: "", fields: fields1, __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "評価額"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "適合有無"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "データ取得成功")))), /*#__PURE__*/ React.createElement("div", { className: "w-[40%] text-center border border-gray-400 p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "購入ステータス"), /*#__PURE__*/ React.createElement("select", { className: "border-2 border-gray-400 p-2 rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "検討中", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "検討中"), /*#__PURE__*/ React.createElement("option", { value: "購買済み", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "購買済み")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(DataEntryForm, { formTitle: "# 読み取り値", fields: fields2, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[60%] border border-gray-400 p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/property-details.jpg", alt: "Detailed view of property", className: "w-full h-auto mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })))); }