function MainComponent() { const [activeStep, setActiveStep] = React.useState(1); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-4 bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-3 py-1 font-roboto ${activeStep === 1 ? 'bg-blue-500 text-white' : 'bg-white'} rounded-lg`, onClick: ()=>setActiveStep(1), __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "Step 1: 検索"), /*#__PURE__*/ React.createElement("button", { className: `px-3 py-1 font-roboto ${activeStep === 2 ? 'bg-blue-500 text-white' : 'bg-white'} rounded-lg`, onClick: ()=>setActiveStep(2), __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Step 2: 選択"), /*#__PURE__*/ React.createElement("button", { className: `px-3 py-1 font-roboto ${activeStep === 3 ? 'bg-blue-500 text-white' : 'bg-white'} rounded-lg`, onClick: ()=>setActiveStep(3), __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Step 3: パラメータ"), /*#__PURE__*/ React.createElement("button", { className: `px-3 py-1 font-roboto ${activeStep === 4 ? 'bg-blue-500 text-white' : 'bg-white'} rounded-lg`, onClick: ()=>setActiveStep(4), __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Step 4: 結果")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap h-full bg-[#edf2f7]", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `lg:w-1/2 lg:h-1/2 p-4 ${activeStep === 1 ? 'ring-4 ring-blue-500' : ''}`, __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-lg", type: "text", placeholder: "Ticker symbolを入力...", name: "search", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `lg:w-1/2 lg:h-1/2 p-4 ${activeStep === 2 ? 'ring-4 ring-blue-500' : ''}`, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full justify-between", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-3 py-2 mb-2 text-white bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "会社1"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-2 mb-2 text-white bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "会社2"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-2 mb-2 text-white bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "会社3"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-2 text-white bg-blue-500 rounded-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "会社4"))), /*#__PURE__*/ React.createElement("div", { className: `lg:w-1/2 lg:h-1/2 p-4 ${activeStep === 3 ? 'ring-4 ring-blue-500' : ''}`, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 mb-4 border border-gray-300 rounded-lg", type: "date", name: "date", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "parameter", value: "Revenue", className: "form-radio", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "売上")), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "parameter", value: "Profit", className: "form-radio", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "利益")), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "parameter", value: "EBITDA", className: "form-radio", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "EBITDA")), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "parameter", value: "EPS", className: "form-radio", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "EPS")))), /*#__PURE__*/ React.createElement("div", { className: `lg:w-1/2 lg:h-1/2 p-4 ${activeStep === 4 ? 'ring-4 ring-blue-500' : ''}`, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full p-4 border border-gray-300 rounded-lg flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "財務データ結果:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "売上: 表示されます..."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "利益: 表示されます..."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "EBITDA: 表示されます..."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "EPS: 表示されます..."))))); }