function EmailContactForm({ buttonLabel }) { return /*#__PURE__*/ React.createElement("form", { action: "mailto:71taki71@gmail.com", method: "post", enctype: "text/plain", className: "w-full bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "username", type: "text", placeholder: "Your Name", name: "name", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Eメール"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "email", type: "email", placeholder: "email@example.com", name: "email", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "message", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("textarea", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "message", placeholder: "Enter your message...", name: "message", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full", type: "submit", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, buttonLabel))); } function EmailContactFormStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EmailContactForm, { buttonLabel: "送信", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this })); } function Sidebar({ isSelected, notifyParent }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1B438A] h-screen p-4 rounded-tr-3xl rounded-br-3xl", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Insta Tool"), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)); } function SidebarStory() { const [selectedItem, setSelectedItem] = React.useState("Dashboard"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { isSelected: selectedItem, notifyParent: setSelectedItem, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function Component({ title, questions }) { const [selectedQuestionIndex, setSelectedQuestionIndex] = React.useState(null); const handleQuestionClick = (index)=>{ setSelectedQuestionIndex((prevIndex)=>prevIndex === index ? null : index); }; return /*#__PURE__*/ React.createElement("div", { className: "w-screen h-screen bg-[#FFFFFF] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[90%] max-w-4xl bg-white rounded-lg p-5 shadow-lg", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-inter text-3xl mb-8 text-[#37394e]", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex items-center bg-gray-50 shadow border border-gray-300 rounded", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search px-3 text-gray-700", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full py-2 px-3 rounded bg-gray-50 appearance-none border-none text-gray-700 leading-tight focus:outline-none", type: "text", placeholder: "質問を検索...", name: "search-question", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "list-none", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, questions.map((question, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4 text-gray-700", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center rounded border border-gray-300 p-4 hover:bg-gray-100 cursor-pointer", onClick: ()=>handleQuestionClick(index), __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, question.title), /*#__PURE__*/ React.createElement("i", { className: `fa ${selectedQuestionIndex === index ? 'fa-chevron-up' : 'fa-chevron-down'} text-[#808080]`, __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this })), selectedQuestionIndex === index && /*#__PURE__*/ React.createElement("p", { className: "mt-2 p-4 border rounded border-gray-300 bg-white", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, question.answer)))))); } function ComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { title: "よくある質問", questions: [ { title: "Instagram APIの設定方法は？", answer: "Instagram APIの設定には・・・" }, { title: "アプリIDとシークレットキーの取得方法は？", answer: "アプリIDとシークレットキーの取得については・・・" }, { title: "短期トークンと長期トークンの違いは？", answer: "短期トークンと長期トークンの違いについては・・・" }, { title: "アカウント選択機能はどのように使用するのか？", answer: "アカウント選択機能の使用方法については・・・" } ], __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedItem, setSelectedItem] = React.useState("Dashboard"); const [isSidebarOpen, setIsSidebarOpen] = React.useState(false); const handleSidebarToggle = ()=>{ setIsSidebarOpen(!isSidebarOpen); }; let content; switch(selectedItem){ case "Dashboard": content = /*#__PURE__*/ React.createElement("iframe", { src: "https://lookerstudio.google.com/reporting/3da86615-f0eb-41f2-a68a-9be9e91c5c09", title: "Instagram Insights Analysis", className: "w-full h-full", allowFullScreen: true, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }); break; case "Competitive Analysis": content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, "Competitive Analysis content will be displayed here."); break; case "Setting": content = /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "block w-full px-4 py-2 border rounded-md", type: "text", placeholder: "App ID", name: "app_id", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "block w-full px-4 py-2 border rounded-md", type: "text", placeholder: "App secret", name: "app_secret", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "block w-full px-4 py-2 border rounded-md", type: "text", placeholder: "Short-lived token", name: "short_lived_token", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "block w-full px-4 py-2 border rounded-md", name: "account_select", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Select an account"), /*#__PURE__*/ React.createElement("option", { value: "account1", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Account 1"), /*#__PURE__*/ React.createElement("option", { value: "account2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Account 2")), /*#__PURE__*/ React.createElement("input", { className: "block w-full px-4 py-2 border rounded-md", type: "text", placeholder: "Long-lived token", name: "long_lived_token", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })); break; case "Contact Us": content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 w-full", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(EmailContactForm, { buttonLabel: "送信", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(Component, { title: "よくある質問", questions: [ { title: "Instagram APIの設定方法は？", answer: "Instagram APIの設定には・・・" }, { title: "アプリIDとシークレットキーの取得方法は？", answer: "アプリIDとシークレットキーの取得については・・・" }, { title: "短期トークンと長期トークンの違いは？", answer: "短期トークンと長期トークンの違いについては・・・" }, { title: "アカウント選択機能はどのように使用するのか？", answer: "アカウント選択機能の使用方法については・・・" } ], __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this })); break; default: content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "Select a menu item from the sidebar."); } return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen bg-[#F5F8FD]", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `fixed inset-y-0 left-0 z-30 transform ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"} bg-[#1B438A] w-64 min-h-screen p-4 transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:block`, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { isSelected: selectedItem, notifyParent: (item)=>{ setSelectedItem(item); handleSidebarToggle(); }, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-0 right-0 p-4 text-white lg:hidden", onClick: handleSidebarToggle, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-2xl", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "lg:hidden flex items-center justify-between p-4 text-white bg-[#1B438A] w-full fixed top-0 z-20", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2", onClick: handleSidebarToggle, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-2xl", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Insta Tool"), /*#__PURE__*/ React.createElement("div", { style: { width: '48px' }, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-6 mt-12 lg:mt-0", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, content)); }