function JapaneseInputTextArea({ name, value, onChange, rows, placeholder }) { return /*#__PURE__*/ React.createElement("textarea", { name: name, value: value, onChange: onChange, rows: rows, className: "w-full p-2 font-roboto text-sm border rounded-md resize-none", placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function JapaneseInputTextAreaStory() { const [question, setQuestion] = React.useState(""); const handleInputChange = (e)=>{ setQuestion(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseInputTextArea, { name: "questionInput", value: question, onChange: handleInputChange, rows: "4", placeholder: "ここにあなたの質問を入力してください...", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tabIndex, setTabIndex] = React.useState("Copilot"); const [question, setQuestion] = React.useState(""); const handleTabChange = (tab)=>{ setTabIndex(tab); }; const handleInputChange = (event)=>{ setQuestion(event.target.value); }; const submitQuestion = ()=>{ alert(`Question submitted to ${tabIndex}: ${question}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row justify-center items-center bg-[#f5f5f5] p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange("Copilot"), className: `font-roboto text-sm p-2 ${tabIndex === "Copilot" ? "text-blue-500 border-b-2 border-blue-500" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Copilot"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange("ChatGPT"), className: `font-roboto text-sm p-2 ${tabIndex === "ChatGPT" ? "text-blue-500 border-b-2 border-blue-500" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "ChatGPT"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange("Claude"), className: `font-roboto text-sm p-2 ${tabIndex === "Claude" ? "text-blue-500 border-b-2 border-blue-500" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Claude"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange("Groq"), className: `font-roboto text-sm p-2 ${tabIndex === "Groq" ? "text-blue-500 border-b-2 border-blue-500" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Groq")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseInputTextArea, { name: "questionInput", value: question, onChange: handleInputChange, rows: "4", placeholder: "ここにあなたの質問を入力してください...", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: submitQuestion, className: "px-4 py-2 bg-blue-500 text-white rounded-md font-roboto text-sm", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "送信"))); }