function TextAnalysisInputField({ subject, onSubjectChange, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "subject", value: subject, onChange: onSubjectChange, className: "block w-full p-2.5 border border-[#dcdfe6] rounded-lg shadow-sm focus:border-[#3498db] focus:ring-[#3498db]", placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function TextAnalysisInputFieldStory() { const [subject, setSubject] = React.useState(""); const handleSubjectChange = (e)=>{ setSubject(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TextAnalysisInputField, { subject: subject, onSubjectChange: handleSubjectChange, placeholder: "Type subject to analyze", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function ButtonStyleGuide({ loading }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-24 h-10 text-white bg-[#3498db] rounded-lg hover:bg-[#2980b9]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, loading ? 'Analyzing...' : 'Analyze'); } function ButtonStyleGuideStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ButtonStyleGuide, { loading: false, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ButtonStyleGuide, { loading: true, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [analysisResult, setAnalysisResult] = React.useState(""); const [subject, setSubject] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleSubjectChange = (e)=>{ setSubject(e.target.value); }; const analyzeSubject = ()=>{ setLoading(true); fetch('/api/subjectanalysis', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ subject: subject }) }).then((response)=>response.json()).then((data)=>{ setAnalysisResult(data.analysis); setSubject(""); }).catch((error)=>{ console.error('Error:', error); }).finally(()=>{ setLoading(false); }); }; const handleSubmit = (e)=>{ e.preventDefault(); analyzeSubject(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f4f7f6]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl p-8 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-5 text-2xl font-semibold text-[#2c3e50]", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Subject Analysis"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(TextAnalysisInputField, { subject: subject, onSubjectChange: handleSubjectChange, placeholder: "Type subject to analyze", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(ButtonStyleGuide, { loading: loading, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), analysisResult && /*#__PURE__*/ React.createElement("div", { className: "mt-5 p-4 bg-[#ecf0f1] border border-[#dcdfe6] rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#2c3e50]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Analysis Result"), /*#__PURE__*/ React.createElement("p", { className: "text-[#34495e]", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, analysisResult)))); }