function MainComponent({ newsList, toggleSummary, onSearch }) { const [searchQuery, setSearchQuery] = React.useState(""); const handleSearch = (event)=>{ setSearchQuery(event.target.value); onSearch(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search by company or category...", className: "w-full p-2 border rounded", value: searchQuery, onChange: handleSearch, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-300", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, newsList.map((newsItem)=>/*#__PURE__*/ React.createElement("li", { key: newsItem.id, className: "bg-white", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-5 py-4 flex flex-col md:flex-row justify-between items-start", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: newsItem.thumbnail, alt: `${newsItem.company} news thumbnail`, className: "w-[100px] h-[60px] mr-3", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#0066cc] font-semibold mr-3", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, newsItem.company), /*#__PURE__*/ React.createElement("span", { className: "text-sm uppercase text-[#0066cc]", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, newsItem.category))), /*#__PURE__*/ React.createElement("h3", { className: "flex-1 text-sm font-semibold", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, newsItem.title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleSummary(newsItem.id), className: "transition transform hover:rotate-180", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${newsItem.showSummary ? "fa-chevron-up" : "fa-chevron-down"} text-gray-700 text-lg`, __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }))), newsItem.showSummary && /*#__PURE__*/ React.createElement("div", { className: "p-4 text-left text-sm", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, newsItem.summary))))); } function StoryComponent() { const sampleNewsList = [ { id: 1, company: "Company A", category: "Tech", title: "New Tech Launch", date: "2023-04-01", summary: "Company A launched a new tech product aiming at improving productivity.", showSummary: false, thumbnail: "/images/tech-launch.jpg" }, { id: 2, company: "Company B", category: "Finance", title: "Financial Market Update", date: "2023-04-02", summary: "Company B provides an update on the recent trends in the financial market.", showSummary: false, thumbnail: "/images/finance-update.jpg" } ]; const [newsList, setNewsList] = React.useState(sampleNewsList); const [filteredNewsList, setFilteredNewsList] = React.useState(sampleNewsList); const toggleSummary = (id)=>{ setNewsList((prevNewsList)=>prevNewsList.map((item)=>item.id === id ? { ...item, showSummary: !item.showSummary } : item)); }; const onSearch = (query)=>{ if (!query) { setFilteredNewsList(newsList); return; } const filtered = newsList.filter((item)=>item.company.toLowerCase().includes(query.toLowerCase()) || item.category.toLowerCase().includes(query.toLowerCase())); setFilteredNewsList(filtered); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { newsList: filteredNewsList, toggleSummary: toggleSummary, onSearch: onSearch, __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this })); }