Merge pull request #88 from Vipul-045/master

News Page

app/news/page.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import News from '../../components/News'
+
+const page = async () => {
+    return(
+        <div className="flex flex-col mt-5 gap-7">
+       <div className="bg-cover bg-center bg-opacity-50 bg-[url(https://im.indiatimes.in/facebook/2019/Oct/mobile_gaming_1570096408.jpg)] w-full flex flex-col justify-center text-center items-center pl-7 h-[500px] gap-3">
+        <h1 className="text-5xl font-extrabold justify-center"> Welcome to {' '}
+        <span className='text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]'> 
+             Esports News
+            </span> </h1>
+        <span className="auto text-md">Your Ultimate source for Esports News</span>
+      </div>
+      <News/>
+      </div>
+
+    )
+}
+
+export default page;

components/Navbar.jsx

@@ -152,6 +152,10 @@ const navLinks = [
     title: "Blogs",
     href: "/blogs",
   },
+  {
+    title: "News",
+    href: "/news",
+  },
   {
     title: "About",
     href: "/about",

components/News.jsx

@@ -0,0 +1,37 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import NewsItem from "./NewsItem";
+import dotenv from "dotenv";
+
+const News = () => {
+  const [articles, setArticles] = 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);
+    };
+    getArticles();
+  }, [])
+
+  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>
+  );
+};
+
+export default News;

components/NewsItem.jsx

@@ -0,0 +1,32 @@
+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>
+      </div>
+    </div>
+  );
+};
+
+
+export default NewsItem;

example.env

@@ -1,4 +1,5 @@
 DATABASE_URL="Mongo_DB_Connection_String/DB_Name"
 MONGODB_URL=''
 RESEND_API_KEY=''
-NEXTAUTH_SECRET=''
+NEXTAUTH_SECRET=''
+NEWS_URL='https://newsapi.org/v2/everything?q=Esports&sortBy=publishedAt&language=en&apiKey=08573ce9567742189e61fdc2618a482b'