function MainComponent() { const [activeTab, setActiveTab] = React.useState('会員登録'); const [memberData, setMemberData] = React.useState({ email: '', password: '', memberCode: '12345ABC' }); const tabs = [ { name: '会員登録', icon: 'fa-user-plus' }, { name: '会員証', icon: 'fa-id-card' } ]; const handleInputChange = (e)=>{ const { name, value } = e.target; setMemberData((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); // Normally, you would submit the form here setActiveTab('会員証'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-5 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, tabs.map((tab)=>/*#__PURE__*/ React.createElement("li", { key: tab.name, className: `flex flex-col items-center justify-center w-1/3 p-4 text-gray-700 cursor-pointer hover:text-blue-500 ${activeTab === tab.name ? 'text-blue-500' : ''}`, onClick: ()=>setActiveTab(tab.name), __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${tab.icon} fa-lg`, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, tab.name)))), activeTab === '会員登録' && /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-1", htmlFor: "email", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: memberData.email, onChange: handleInputChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500", required: true, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-1", htmlFor: "password", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: memberData.password, onChange: handleInputChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500", required: true, __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-500 text-white font-roboto rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "登録"))), activeTab === '会員証' && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-gray-700 mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "会員コード: ", memberData.memberCode), /*#__PURE__*/ React.createElement("img", { src: `data:image/svg+xml;base64,${btoa('')}`, alt: "バーコード（JIS）", width: "200", height: "100", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })))); }