first commit

app/news/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+// 1. Define the TypeScript interface for a News Article item
+interface Article {
+  id: number;
+  title: string;
+  body: string;
+}
+
+export default function NewsPage() {
+  // 2. Setup state for data, loading, and error handling
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 3. Fetch data inside useEffect
+  useEffect(() => {
+    // Create an AbortController to cleanup on component unmount
+    const controller = new AbortController();
+
+    const fetchNews = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Fetch top 6 mock news articles using Axios
+        const response = await axios.get<Article[]>(
+          "https://jsonplaceholderrr.typicode.com/posts?_limit=6",
+          { signal: controller.signal }
+        );
+        console.log(response.data);
+        setArticles(response.data);
+      } catch (err: unknown) {
+        console.log("error", err);
+        // Ignore errors caused by unmounting (aborted requests)
+        if (axios.isCancel(err)) return;
+
+        if (axios.isAxiosError(err)) {
+          setError(err.message || "Failed to fetch news articles.");
+        } else {
+          setError("An unexpected error occurred.");
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchNews();
+
+    // Cleanup function runs if the component unmounts
+    return () => {
+      controller.abort();
+    };
+  }, []); // Empty dependency array = runs ONCE when component mounts
+
+  // 4. Render Loading State (DaisyUI Loading Spinner)
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-base-200 flex flex-col items-center justify-center p-8">
+        <span className="loading loading-spinner loading-lg text-primary"></span>
+        <p className="mt-4 text-base-content/70">Fetching latest news...</p>
+      </main>
+    );
+  }
+
+  // 5. Render Error State (DaisyUI Alert)
+  if (error) {
+    return (
+      <main className="min-h-screen bg-base-200 p-8 flex justify-center items-center">
+        <div className="alert alert-error max-w-md shadow-lg">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="stroke-current shrink-0 h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 9 0 0118 0z"
+            />
+          </svg>
+          <span>{error}</span>
+        </div>
+      </main>
+    );
+  }
+
+  // 6. Render Data on JSX (DaisyUI Card Grid)
+  return (
+    <main className="min-h-screen bg-base-200 p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        {/* Header */}
+        <header className="border-b border-base-300 pb-4">
+          <h1 className="text-4xl font-extrabold text-base-content">
+            Trending Headlines
+          </h1>
+          <p className="text-sm text-base-content/60 mt-1">
+            Fetched via Axios + useEffect
+          </p>
+        </header>
+
+        {/* Article Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {articles.map((article) => (
+            <article
+              key={article.id}
+              className="card bg-base-100 shadow-xl border border-base-300 hover:shadow-2xl transition-shadow"
+            >
+              <div className="card-body">
+                <div className="badge badge-primary badge-outline mb-2">
+                  News #{article.id}
+                </div>
+                <h2 className="card-title text-base-content capitalize">
+                  {article.title}
+                </h2>
+                <p className="text-sm text-base-content/70 line-clamp-3">
+                  {article.body}
+                </p>
+                <div className="card-actions justify-end mt-4">
+                  <button className="btn btn-sm btn-accent btn-outline">
+                    Read Article
+                  </button>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}