function SearchButton({ buttonText = 'Analyze', buttonColor = '#0056b3', onButtonClick }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full text-white bg-[${buttonColor}] rounded-md py-2`, onClick: onButtonClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function SearchButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchButton, { buttonText: "Analyze", buttonColor: "#0056b3", onButtonClick: ()=>console.log('Button clicked'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function BlogWebScraper({ buttonText }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full text-white bg-[#0056b3] rounded-md py-2 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function BlogWebScraperStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlogWebScraper, { buttonText: "Analyze", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [url, setUrl] = React.useState(""); const [content, setContent] = React.useState(""); const [analysisResult, setAnalysisResult] = React.useState({ keywords: [], phrases: [], topic: '', sentiment: '', summary: '' }); const handleUrlChange = (e)=>setUrl(e.target.value); const handleSubmit = async (e)=>{ e.preventDefault(); const response = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: url, getText: true }) }); const data = await response.text(); setContent(data); fakeNLPAnalysis(data); }; const fakeNLPAnalysis = (fetchedContent)=>{ setAnalysisResult({ keywords: [ 'keyword1', 'keyword2' ], phrases: [ 'important phrase1', 'important phrase2' ], topic: 'Main Topic', sentiment: 'Positive', summary: 'This is a summary of the blog' }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#004B8D] px-5 py-3 text-white", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Blog Analysis Tool"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "mx-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#about", className: "mx-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "mx-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 flex flex-col justify-center items-center bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-full max-w-[500px]", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "url", className: "block font-roboto text-sm text-[#666]", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Enter Ameblo URL"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "url", name: "url", value: url, onChange: handleUrlChange, className: "mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[#0056b3] focus:border-[#0056b3]", placeholder: "Enter Ameblo URL", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement(SearchButton, { buttonText: "Analyze", buttonColor: "#0056b3", onButtonClick: handleSubmit, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })), content && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-sm text-[#333] font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Keywords:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, analysisResult.keywords.map((keyword)=>/*#__PURE__*/ React.createElement("li", { key: keyword, __source: { fileName: "", lineNumber: 66, columnNumber: 59 }, __self: this }, keyword))), /*#__PURE__*/ React.createElement("h3", { __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Important Phrases:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, analysisResult.phrases.map((phrase)=>/*#__PURE__*/ React.createElement("li", { key: phrase, __source: { fileName: "", lineNumber: 68, columnNumber: 57 }, __self: this }, phrase))), /*#__PURE__*/ React.createElement("h3", { __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Topic:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, analysisResult.topic), /*#__PURE__*/ React.createElement("h3", { __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "Sentiment:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, analysisResult.sentiment), /*#__PURE__*/ React.createElement("h3", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Summary:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, analysisResult.summary)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a1a1a] text-white text-center p-4", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "© 2023 Blog Analysis Tool"), /*#__PURE__*/ React.createElement("a", { href: "#privacy", className: "pr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Privacy Policy"), /*#__PURE__*/ React.createElement("a", { href: "#terms", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Terms of Service"))); }