function Sidebar({ onSelect }) { const [selected, setSelected] = React.useState('Home'); function handleSelect(item) { setSelected(item); onSelect(item); } return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1B438A] p-4 h-screen rounded-tr-3xl rounded-br-3xl", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-2xl mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "Member Site"), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-home", name: "Home", isSelected: selected === 'Home', notifyParent: ()=>handleSelect('Home'), hasDropdown: false, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-bell", name: "Notifications", isSelected: selected === 'Notifications', notifyParent: ()=>handleSelect('Notifications'), hasDropdown: false, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-exchange-alt", name: "My Transactions", isSelected: selected === 'My Transactions', notifyParent: ()=>handleSelect('My Transactions'), hasDropdown: false, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-chart-line", name: "Reports", isSelected: selected === 'Reports', notifyParent: ()=>handleSelect('Reports'), hasDropdown: true, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-envelope", name: "Contact Us", isSelected: selected === 'Contact Us', notifyParent: ()=>handleSelect('Contact Us'), hasDropdown: false, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-bullhorn", name: "Announcements", isSelected: selected === 'Announcements', notifyParent: ()=>handleSelect('Announcements'), hasDropdown: false, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` div.bg-[#1B438A] > div:not(:first-child) { border-bottom: 1px solid lightgray; margin-top: 4px; } div.bg-[#1B438A] > div:first-child { border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; } `)); } function SidebarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { onSelect: (item)=>console.log(`${item} selected`), __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this })); } function SidebarItem({ icon, name, isSelected, notifyParent, hasDropdown = false }) { const containerClass = isSelected ? 'bg-white' : 'bg-transparent hover:bg-[#ffffff1a]'; const textAndIconColor = isSelected ? 'text-[#1B438A]' : 'text-white'; const dropdownIconClass = isSelected ? 'text-[#1B438A]' : 'text-white'; return /*#__PURE__*/ React.createElement("div", { className: `${containerClass} w-full p-3 rounded cursor-pointer`, onClick: notifyParent, __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} ${textAndIconColor} w-5 h-5 mr-4`, __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `font-bold text-base ${textAndIconColor}`, __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, name)), hasDropdown && /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down ${dropdownIconClass} w-4 h-4`, __source: { fileName: "", lineNumber: 13, columnNumber: 25 }, __self: this }))); } function SidebarItemStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-home", name: "Home", isSelected: false, notifyParent: ()=>console.log("Home selected"), __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-user", name: "Profile", isSelected: true, notifyParent: ()=>console.log("Profile selected"), __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-cog", name: "Settings", isSelected: false, notifyParent: ()=>console.log("Settings selected"), hasDropdown: true, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function ResetPasswordLink({ onReset }) { return /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm text-blue-700 hover:underline", onClick: onReset, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "パスワードを忘れた場合"); } function ResetPasswordLinkStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ResetPasswordLink, { onReset: ()=>console.log('reset view'), __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [confirmPassword, setConfirmPassword] = React.useState(''); const [view, setView] = React.useState('register'); const handleEmailChange = (event)=>setEmail(event.target.value); const handlePasswordChange = (event)=>setPassword(event.target.value); const handleConfirmPasswordChange = (event)=>setConfirmPassword(event.target.value); const handleSubmit = (event)=>{ event.preventDefault(); if (password !== confirmPassword && view === 'register') { alert('パスワードが一致しません。'); return; } if (view === 'register') { setView('login'); } else if (view === 'login') { setView('member'); } }; const handleSelectedViewChange = (selectedView)=>{ setView(selectedView); }; const renderContent = ()=>{ switch(view){ case 'register': case 'login': return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", required: true, className: "bg-white block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 mb-4 rounded", placeholder: "メールアドレス", value: email, onChange: handleEmailChange, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", required: true, className: "bg-white block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 mb-4 rounded", placeholder: "パスワード", value: password, onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), view === 'register' && /*#__PURE__*/ React.createElement("input", { name: "confirmPassword", type: "password", required: true, className: "bg-white block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 mb-4 rounded", placeholder: "パスワード確認", value: confirmPassword, onChange: handleConfirmPasswordChange, __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 border border-transparent rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, view === 'register' ? "新規登録" : "ログイン"), view !== 'reset' && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(ResetPasswordLink, { onReset: ()=>setView('reset'), __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }))); case 'reset': return /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", required: true, className: "bg-white block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 mb-4 rounded", placeholder: "メールアドレス", value: email, onChange: handleEmailChange, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }); case 'member': return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "動画タイトル1"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "動画タイトル2"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "動画タイトル3")); case 'create': return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "title", placeholder: "記事のタイトル", className: "block w-full px-3 py-2 border border-gray-300 rounded bg-white mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "content", placeholder: "記事の内容", className: "block w-full px-3 py-2 border border-gray-300 rounded bg-white mb-4", rows: "10", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "記事投稿")); case 'admin': return /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "記事の編集"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "ページビュー計測"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "会員情報管理")); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#F5F8FD]", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { onSelect: handleSelectedViewChange, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto py-10", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6 bg-white p-8 shadow rounded-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, renderContent())))); }