improved ui news page

dinxsh · Aug 26, 2024 · c3cf7d5 · c3cf7d5
1 parent e9a9af0
commit c3cf7d5
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 41 deletions.
diff --git a/components/News.jsx b/components/News.jsx
@@ -5,33 +5,55 @@ import NewsItem from "./NewsItem";
 import dotenv from "dotenv";
 
 const News = () => {
-  const [articles, setArticles] = useState([]);
+  const [latestNews, setLatestNews] = useState([]);
+  const [esportsNews, setEsportsNews] = useState([]);
+  const [gamingNews, setGamingNews] = useState([]);
+  const [tournamentNews, setTournamentNews] = useState([]);
 
   dotenv.config();
 
   useEffect(() => {
-    const getArticles = async () => {
-      const response = await axios.get('https://newsapi.org/v2/everything?q=Gaming+Esports&from=2024-08-11&sortBy=publishedAt&language=en&apiKey=08573ce9567742189e61fdc2618a482b');
-      setArticles(response.data.articles);
+    const fetchNews = async (category, setter) => {
+      const response = await axios.get(
+        `https://newsapi.org/v2/everything?q=${category}&from=2024-08-11&sortBy=publishedAt&language=en&apiKey=08573ce9567742189e61fdc2618a482b`
+      );
+      const articlesWithImages = response.data.articles.filter(article => article.urlToImage);
+      setter(articlesWithImages);
     };
-    getArticles();
-  }, [])
+
+    fetchNews("Latest News", setLatestNews);
+    fetchNews("Esports", setEsportsNews);
+    fetchNews("Gaming News", setGamingNews);
+    fetchNews("Tournaments", setTournamentNews);
+  }, []);
+
+  const renderNewsSlider = (title, articles) => (
+    <div className="mb-12">
+      <h2 className="text-3xl font-bold mb-6 text-gray-200">{title}</h2>
+      <div className="flex overflow-x-auto space-x-6 pb-6 scrollbar-hide">
+        {articles.map((article, index) => (
+          <div key={index} className="flex-none w-72 h-72">
+            <NewsItem
+              title={article.title}
+              description={article.description}
+              url={article.url}
+              urlToImage={article.urlToImage}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8"> 
-      {articles.map((article) => {
-        return (
-          <NewsItem
-            title={article.title}
-            description={article.description}
-            url={article.url}
-            urlToImage={article.urlToImage}
-
-          />
-        );
-      })}
+    <div className="container mx-auto px-6 py-12 bg-gray-900">
+      <h1 className="text-5xl font-bold mb-12 text-center text-gray-100">News Highlights</h1>
+      {renderNewsSlider("Latest News", latestNews)}
+      {renderNewsSlider("Esports", esportsNews)}
+      {renderNewsSlider("Gaming News", gamingNews)}
+      {renderNewsSlider("Tournaments", tournamentNews)}
     </div>
   );
 };
 
-export default News;
+export default News;
diff --git a/components/NewsItem.jsx b/components/NewsItem.jsx
@@ -2,31 +2,33 @@ import React from "react";
 
 const NewsItem = ({ title, description, url, urlToImage }) => {
   return (
-    <div className="flex-1 p-6 md:p-10 z-10 overflow-auto">
-      <div className=" flex bg-black rounded-2xl border border-solid border-indigo-700 ">
-        <div className=" p-10 z-10 overflow-hidden">
-          <div className="min-h-96 ">
-            <div className="relative h-64">
-              <img
-                src={urlToImage}
-                alt={urlToImage}
-                className="w-full h-full rounded-sm object-cover"
-              />
-              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-24"></div>
-            </div>
-            <h3 className="text-2xl cursor-pointer font-bold mb-4 text-neon-green hover:text-white transition-colors duration-300 line-clamp-3">
-              <a href={url}>{title}</a>
-            </h3>
-            <p className="text-gray-300 mb-6 text-base line-clamp-4">
-              {description}
-            </p>
-            <a href={url} className="inline-flex items-center justify-center  text-white py-2" >Read Full Article</a>
-          </div>
+    <div className="w-72 h-72 p-4">
+      <div className="bg-black rounded-xl border border-indigo-700 h-full flex flex-col overflow-hidden">
+        <div className="relative h-1/2">
+          <img
+            src={urlToImage}
+            alt={title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-12"></div>
+        </div>
+        <div className="p-4 flex flex-col justify-between flex-grow">
+          <h3 className="text-lg font-bold mb-2 text-neon-green hover:text-white transition-colors duration-300 line-clamp-2">
+            <a href={url}>{title}</a>
+          </h3>
+          <p className="text-gray-300 text-sm mb-2 line-clamp-2">
+            {description}
+          </p>
+          <a 
+            href={url} 
+            className="text-white text-sm hover:text-neon-green transition-colors duration-300"
+          >
+            Read Full Article
+          </a>
         </div>
       </div>
     </div>
   );
 };
 
-
-export default NewsItem;
+export default NewsItem;