function MainComponent() { const [articles, setArticles] = React.useState([]); const [selectedCategory, setSelectedCategory] = React.useState(''); const fetchNews = async (category)=>{ const response = await fetch(`https://newsapi.org/v2/top-headlines?country=il&category=${category}&apiKey=YOUR_API_KEY`); const data = await response.json(); setArticles(data.articles.slice(0, 3)); }; React.useEffect(()=>{ if (selectedCategory) { fetchNews(selectedCategory); } }, [ selectedCategory ]); const handleCategoryChange = (event)=>{ setSelectedCategory(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "categories", onChange: handleCategoryChange, className: "block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "בחר קטגוריה"), /*#__PURE__*/ React.createElement("option", { value: "business", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "עסקים"), /*#__PURE__*/ React.createElement("option", { value: "entertainment", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "בידור"), /*#__PURE__*/ React.createElement("option", { value: "health", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "בריאות"), /*#__PURE__*/ React.createElement("option", { value: "science", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "מדע"), /*#__PURE__*/ React.createElement("option", { value: "sports", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "ספורט"), /*#__PURE__*/ React.createElement("option", { value: "technology", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "טכנולוגיה")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, articles.map((article, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border rounded overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full object-cover h-[200px]", src: article.urlToImage || '/images/placeholder.png', alt: `מאמר בנושא ${article.title}`, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2 text-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, article.description))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, ` @keyframes fadeInUp { from { transform: translate3d(0, 40px, 0); } to { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .container { animation: fadeIn 0.5s ease-out 1; } select, .grid > div { animation: fadeInUp 0.5s ease-out 1; } `)); }