function SuggestionsSection({ suggestedTopics = [] }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TopicForm, { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Suggested Topics"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, suggestedTopics.map((topic, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-full text-sm font-roboto transition-colors duration-200", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, topic))))); } function SuggestionsSectionStory() { const mockSuggestedTopics = [ "Machine Learning", "Data Visualization", "Natural Language Processing", "Network Analysis", "Topic Modeling" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SuggestionsSection, { suggestedTopics: mockSuggestedTopics, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SuggestionsSection, { suggestedTopics: [], __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function TopicForm() { const [topic, setTopic] = useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (topic.trim()) { setTopic(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex gap-2 items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "topic", value: topic, onChange: (e)=>setTopic(e.target.value), className: "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Add a new topic", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition duration-200", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Add"))); } function TopicFormStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TopicForm, { __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function Header() { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a1a1a] p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center gap-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-2xl text-white", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-white", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Topical Map Visualizer")))); } function HeaderStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function FeedbackSection() { const [unrelatedTopics, setUnrelatedTopics] = useState([]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "Unrelated Topics"), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("ul", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, unrelatedTopics.map((topic, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-gray-50 p-3 rounded", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, topic)))))))); } function FeedbackSectionStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FeedbackSection, { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); } function TopicalChart({ data = [] }) { const [topics, setTopics] = useState([ { pillar: "Digital Marketing", clusters: [ { name: "Social Media", subtopics: [ "Instagram", "Twitter", "Facebook", "LinkedIn" ] }, { name: "Content Marketing", subtopics: [ "Blogging", "Email", "Video", "Podcasting" ] } ] } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, topics.map((topic, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-12", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] text-white px-6 py-3 rounded-lg font-roboto text-xl", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, topic.pillar), /*#__PURE__*/ React.createElement("div", { className: "h-8 w-[2px] bg-gray-300", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-12 relative", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, topic.clusters.map((cluster, cIndex)=>/*#__PURE__*/ React.createElement("div", { key: cIndex, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] text-white px-4 py-2 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 23 }, __self: this }, cluster.name), /*#__PURE__*/ React.createElement("div", { className: "h-8 w-[2px] bg-gray-300", __source: { fileName: "", lineNumber: 37, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center w-[200px]", __source: { fileName: "", lineNumber: 38, columnNumber: 23 }, __self: this }, cluster.subtopics.map((subtopic, sIndex)=>/*#__PURE__*/ React.createElement("div", { key: sIndex, className: "bg-[#3a3a3a] text-white px-3 py-1 rounded font-roboto text-sm", __source: { fileName: "", lineNumber: 40, columnNumber: 27 }, __self: this }, subtopic)))))))))))); } function TopicalChartStory() { const sampleData = [ { pillar: "Technology", clusters: [ { name: "Frontend", subtopics: [ "React", "Vue", "Angular", "Svelte" ] }, { name: "Backend", subtopics: [ "Node.js", "Python", "Java", "Go" ] } ] } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TopicalChart, { data: sampleData, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(TopicForm, { __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(TopicalChart, { __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(FeedbackSection, { __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(SuggestionsSection, { __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this })))))); }