function Main({ feeds, selectedSector, onAddThought, onRateThought, onComment }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex bg-gray-100", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-grow p-4 space-x-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, [ "Research", "Challenges", "Ideas" ].map((column)=>/*#__PURE__*/ React.createElement("div", { key: column, className: "w-[30%] bg-white p-4 border border-gray-200 rounded overflow-y-scroll h-[80vh]", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, column), /*#__PURE__*/ React.createElement(Feed, { thoughts: feeds[selectedSector][column], onAddThought: (content)=>onAddThought(selectedSector, column, content), onRateThought: (index, rating)=>onRateThought(selectedSector, column, index, rating), onComment: (index, comment)=>onComment(selectedSector, column, index, comment), __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded mt-2", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, "Submit ", column)))))); } function MainStory() { const sectors = [ "Environment", "Education", "Health" ]; const [selectedSector, setSelectedSector] = React.useState(sectors[0]); const feedsData = { Environment: { Research: [], Challenges: [], Ideas: [] }, Education: { Research: [], Challenges: [], Ideas: [] }, Health: { Research: [], Challenges: [], Ideas: [] } }; const [feeds, setFeeds] = React.useState(feedsData); const addNewThought = (category, column, content)=>{ const newThought = { author: "New User", username: "newuser", avatar: "/images/default-avatar.jpg", time: "Just now", content, rating: 1, comments: [] }; setFeeds({ ...feeds, [category]: { ...feeds[category], [column]: [ newThought, ...feeds[category][column] ] } }); }; const rateThought = (category, column, index, rating)=>{ const updatedThoughts = [ ...feeds[category][column] ]; updatedThoughts[index].rating = rating; setFeeds({ ...feeds, [category]: { ...feeds[category], [column]: updatedThoughts } }); }; const addComment = (category, column, index, comment)=>{ const updatedThoughts = [ ...feeds[category][column] ]; updatedThoughts[index].comments = updatedThoughts[index].comments || []; updatedThoughts[index].comments.push(comment); setFeeds({ ...feeds, [category]: { ...feeds[category], [column]: updatedThoughts } }); }; return /*#__PURE__*/ React.createElement(Main, { feeds: feeds, selectedSector: selectedSector, onAddThought: addNewThought, onRateThought: rateThought, onComment: addComment, __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }); } function Feed({ thoughts, onAddThought, onRateThought, onComment }) { const [newThought, setNewThought] = React.useState(''); const handleThoughtChange = (e)=>setNewThought(e.target.value); const handleThoughtSubmit = (e)=>{ e.preventDefault(); if (newThought.trim()) { onAddThought(newThought); setNewThought(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleThoughtSubmit, className: "border-b border-gray-200 p-4 mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "thought", value: newThought, onChange: handleThoughtChange, placeholder: "What's on your mind?", className: "w-full p-2 border border-gray-300 rounded", maxLength: "280", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded mt-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Submit Thought")), thoughts.map((thought, index)=>{ const isLongThought = thought.content.length > 280; const [isExpanded, setExpanded] = React.useState(false); const toggleExpanded = ()=>setExpanded((prev)=>!prev); const displayedContent = isExpanded ? thought.content : thought.content.slice(0, 280); return /*#__PURE__*/ React.createElement("div", { key: index, className: "border-b border-gray-200 p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: thought.avatar, alt: `Avatar of ${thought.author}`, className: "w-[50px] h-[50px] rounded-full mr-4", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-1", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-base", __source: { fileName: "", lineNumber: 41, columnNumber: 21 }, __self: this }, thought.author), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm ml-2", __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, "@", thought.username)), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, thought.time)), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-base", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, displayedContent), isLongThought && !isExpanded && /*#__PURE__*/ React.createElement("button", { onClick: toggleExpanded, className: "text-blue-500", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, "Read more"), isLongThought && isExpanded && /*#__PURE__*/ React.createElement("button", { onClick: toggleExpanded, className: "text-blue-500", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "Show less"))), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "10", value: thought.rating || 1, onChange: (e)=>onRateThought(index, e.target.value), name: "rating", className: "w-full", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-base text-gray-700 mt-1", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Rating: ", thought.rating || 1)), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); onComment(index, e.target.comment.value); e.target.reset(); }, className: "mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "comment", placeholder: "Add a comment...", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded mt-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Comment")), thought.comments && thought.comments.map((comment, cIndex)=>/*#__PURE__*/ React.createElement("div", { key: cIndex, className: "pl-12 mb-2 text-sm", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, comment))); })); } function FeedStory() { const [thoughts, setThoughts] = React.useState([ { author: "Jane Doe", username: "janedoe", avatar: "/images/jane-doe.jpg", time: "2h ago", content: "This is a sample thought content.", rating: 5, comments: [ "Great thought!", "Thanks for sharing." ] }, { author: "John Smith", username: "johnsmith", avatar: "/images/john-smith.jpg", time: "3h ago", content: "This is another sample thought content that's a bit longer but still less than 280 characters.", rating: 7, comments: [ "Interesting!", "Very informative." ] } ]); const addNewThought = (content)=>{ const newThought = { author: "New User", username: "newuser", avatar: "/images/default-avatar.jpg", time: "Just now", content, rating: 1, comments: [] }; setThoughts([ newThought, ...thoughts ]); }; const rateThought = (index, rating)=>{ const updatedThoughts = [ ...thoughts ]; updatedThoughts[index].rating = rating; setThoughts(updatedThoughts); }; const addComment = (index, comment)=>{ const updatedThoughts = [ ...thoughts ]; updatedThoughts[index].comments = updatedThoughts[index].comments || []; updatedThoughts[index].comments.push(comment); setThoughts(updatedThoughts); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Feed, { thoughts: thoughts, onAddThought: addNewThought, onRateThought: rateThought, onComment: addComment, __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this })); } function SectorsSideDrawer({ isOpen, sectors, onToggle }) { const drawerClass = isOpen ? "translate-x-0" : "-translate-x-full"; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "fixed top-4 left-4 z-50", onClick: onToggle, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-2xl", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `fixed top-0 left-0 w-[250px] h-full bg-[#fafafa] shadow-lg transition-transform ${drawerClass}`, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "mt-20 space-y-6 pl-6", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, sectors.map((sector, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, sector))))); } function SectorsSideDrawerStory() { const sectors = [ "Environment", "Education", "Health" ]; const [isOpen, setIsOpen] = React.useState(false); const handleToggle = ()=>{ setIsOpen((prev)=>!prev); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SectorsSideDrawer, { isOpen: isOpen, sectors: sectors, onToggle: handleToggle, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); } function MainComponent() { const sectors = [ "Environment", "Education", "Health" ]; const [selectedSector, setSelectedSector] = React.useState(sectors[0]); const [isDrawerOpen, setDrawerOpen] = React.useState(false); const handleToggleDrawer = ()=>setDrawerOpen((prev)=>!prev); const selectSector = (sector)=>{ setSelectedSector(sector); setDrawerOpen(false); }; const feedsData = { Environment: { Research: [], Challenges: [], Ideas: [] }, Education: { Research: [], Challenges: [], Ideas: [] }, Health: { Research: [], Challenges: [], Ideas: [] } }; const [feeds, setFeeds] = React.useState(feedsData); const addNewThought = (category, column, content)=>{ const newThought = { author: "New User", username: "newuser", avatar: "/images/default-avatar.jpg", time: "Just now", content, rating: 1, comments: [] }; setFeeds({ ...feeds, [category]: { ...feeds[category], [column]: [ newThought, ...feeds[category][column] ] } }); }; const rateThought = (category, column, index, rating)=>{ const updatedThoughts = [ ...feeds[category][column] ]; updatedThoughts[index].rating = rating; setFeeds({ ...feeds, [category]: { ...feeds[category], [column]: updatedThoughts } }); }; const addComment = (category, column, index, comment)=>{ const updatedThoughts = [ ...feeds[category][column] ]; updatedThoughts[index].comments = updatedThoughts[index].comments || []; updatedThoughts[index].comments.push(comment); setFeeds({ ...feeds, [category]: { ...feeds[category], [column]: updatedThoughts } }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SectorsSideDrawer, { isOpen: isDrawerOpen, sectors: sectors, onToggle: handleToggleDrawer, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-grow", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Main, { feeds: feeds, selectedSector: selectedSector, onAddThought: addNewThought, onRateThought: rateThought, onComment: addComment, __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }))); }