first commit

2026-10-04 12:04:52 +01:00
commit 2d54228143
@@ -0,0 +1,11 @@
+"use server";
+
+import { revalidatePath, revalidateTag } from "next/cache";
+
+export async function refreshWeatherData() {
+  // Perform your mutation or database operation here
+
+  // Revalidate the specific path
+  revalidatePath("/weather");
+  revalidateTag("weather-data", "max");
+}
@@ -0,0 +1,7 @@
+import { revalidateTag } from "next/cache";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  revalidateTag("weather-data", "max");
+  return NextResponse.json({ revalidated: true, now: Date.now() });
+}
@@ -0,0 +1,27 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import "./globals.css";
+
+// const geistSans = Geist({
+//   variable: "--font-geist-sans",
+//   subsets: ["latin"]
+// });
+
+// const geistMono = Geist_Mono({
+//   variable: "--font-geist-mono",
+//   subsets: ["latin"]
+// });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app"
+};
+
+export default function RootLayout({ children }: LayoutProps<"/">) {
+  return (
+    <html
+      lang="en"
+      className={`${GeistSans.variable} ${GeistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,69 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <Image
+          className="dark:invert h-5 w-[100px]"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the{" "}
+            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
+              page.tsx
+            </code>{" "}
+            file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point or more instructions? Head over to{" "}
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert h-[14px] w-4"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={16}
+              height={14}
+            />
+            Deploy Now
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,25 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+export default function SearchFilters() {
+  const searchParams = useSearchParams();
+
+  // Read parameters using standard URLSearchParams methods (.get())
+  const category = searchParams.get("category") ?? "all";
+  const sort = searchParams.get("sort") ?? "featured";
+
+  return (
+    <div
+      style={{ border: "1px solid #ccc", padding: "1rem", borderRadius: "8px" }}
+    >
+      <h3>Active Client Filters</h3>
+      <p>
+        Client Current Category: <strong>{category}</strong>
+      </p>
+      <p>
+        Client Current Sort Order: <strong>{sort}</strong>
+      </p>
+    </div>
+  );
+}
@@ -0,0 +1,33 @@
+import SearchFilters from "./SearchFilters";
+import { Suspense } from "react";
+
+interface ProductsPageProps {
+  searchParams: Promise<{
+    category?: string; // Optional query string: ?category=shoes
+    sort?: string; // Optional query string: ?sort=asc
+  }>;
+}
+
+export default async function ProductsPage({
+  searchParams,
+}: ProductsPageProps) {
+  // Await the searchParams Promise
+  const { category = "all", sort = "featured" } = await searchParams;
+
+  return (
+    <main className="p-2 m-2 ">
+      <h1>Products Catalog</h1>
+      <p>
+        Server Params Filter Category: <strong>{category}</strong>
+      </p>
+      <p>
+        Server Params Sorting By: <strong>{sort}</strong>
+      </p>
+
+      {/* Render the Client Component inside a Suspense boundary */}
+      <Suspense fallback={<div>Loading filters...</div>}>
+        <SearchFilters />
+      </Suspense>
+    </main>
+  );
+}
@@ -0,0 +1,133 @@
+import { JSX } from "react";
+
+// --- TYPES ---
+interface TfLStatusReason {
+  statusSeverityDescription: string;
+  reason?: string;
+}
+
+interface TfLLineStatus {
+  id: string;
+  name: string;
+  lineStatuses: TfLStatusReason[];
+}
+
+interface OpenMeteoWeather {
+  current: {
+    temperature_2m: number;
+    weather_code: number;
+  };
+  current_units: {
+    temperature_2m: string;
+  };
+}
+
+// --- FETCH FUNCTIONS ---
+async function getTfLTransitStatus(): Promise<TfLLineStatus[]> {
+  // Public endpoint - No API key needed
+  const res = await fetch(
+    "https://api.tfl.gov.uk/line/mode/tube,elizabeth-line,dlr/status",
+    {
+      next: { revalidate: 300 }, // Cache for 5 minutes
+    },
+  );
+
+  if (!res.ok) throw new Error("Failed to fetch TfL line statuses");
+  return res.json();
+}
+
+async function getLondonWeather(): Promise<OpenMeteoWeather> {
+  // Public endpoint - No API key needed
+  const res = await fetch(
+    "https://api.open-meteo.com/v1/forecast?latitude=51.5074&longitude=-0.1278&current=temperature_2m,weather_code",
+    { next: { revalidate: 300 } },
+  );
+
+  if (!res.ok) throw new Error("Failed to fetch London weather");
+  return res.json();
+}
+
+// Helper: Badge color depending on TfL status
+function getStatusBadge(statusText: string): string {
+  if (statusText === "Good Service") return "badge-success";
+  if (statusText.includes("Minor") || statusText.includes("Part"))
+    return "badge-warning";
+  return "badge-error";
+}
+
+// --- SERVER COMPONENT ---
+export default async function TrafficAndWeatherPage(): Promise<JSX.Element> {
+  // PARALLEL FETCHING: Triggers both external network calls simultaneously
+  const [transitData, weatherData] = await Promise.all([
+    getTfLTransitStatus(),
+    getLondonWeather(),
+  ]);
+
+  return (
+    <main className="min-h-screen bg-base-200 p-8">
+      <div className="max-w-5xl mx-auto space-y-8">
+        {/* Header */}
+        <header className="flex justify-between items-end border-b border-base-300 pb-4">
+          <div>
+            <h1 className="text-3xl font-bold">London Transit & Weather</h1>
+            <p className="text-sm text-base-content/60">
+              Fetched in parallel on the server via{" "}
+              <code className="badge badge-outline font-mono">
+                Promise.all()
+              </code>
+            </p>
+          </div>
+
+          {/* Quick Weather Stat Card */}
+          <div className="stat bg-base-100 shadow rounded-box w-auto py-2 px-4">
+            <div className="stat-title text-xs">London Temp</div>
+            <div className="stat-value text-xl text-primary">
+              {weatherData.current.temperature_2m}
+              {weatherData.current_units.temperature_2m}
+            </div>
+          </div>
+        </header>
+
+        {/* TfL Tube & Rail Status Grid */}
+        <section className="space-y-4">
+          <h2 className="text-xl font-semibold flex items-center gap-2">
+            <span>🚇</span> Real-Time Transit Status (TfL Live)
+          </h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {transitData.map((line) => {
+              const currentStatus = line.lineStatuses[0];
+              const statusDesc =
+                currentStatus?.statusSeverityDescription || "Unknown";
+              const disruptionDetail = currentStatus?.reason;
+
+              return (
+                <div
+                  key={line.id}
+                  className="card bg-base-100 shadow-sm border border-base-300"
+                >
+                  <div className="card-body p-4">
+                    <div className="flex justify-between items-center">
+                      <h3 className="font-bold text-base">{line.name}</h3>
+                      <span
+                        className={`badge ${getStatusBadge(statusDesc)} text-xs font-semibold`}
+                      >
+                        {statusDesc}
+                      </span>
+                    </div>
+
+                    {disruptionDetail && (
+                      <p className="text-xs text-base-content/70 mt-2 line-clamp-2">
+                        {disruptionDetail}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,161 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Image from "next/image";
+
+// 1. Define the TypeScript interface for a GitHub User object
+interface GitHubUser {
+  id: number;
+  login: string;
+  avatar_url: string;
+  html_url: string;
+}
+
+const URL = "https://api.github.com/users";
+
+const FetchGitUsers = () => {
+  // 2. Add types to state hooks
+  const [users, setUsers] = useState<GitHubUser[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // 3. Native Web API AbortController for fetch cleanup
+    const controller = new AbortController();
+
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await fetch(URL, { signal: controller.signal });
+        console.log(response);
+
+        if (!response.ok) {
+          throw new Error(`HTTP Error! Status: ${response.status}`);
+        }
+
+        const data: GitHubUser[] = await response.json();
+        setUsers(data);
+      } catch (err: unknown) {
+        // Ignore abort errors caused by component unmounting
+        if (err instanceof Error && err.name === "AbortError") return;
+
+        if (err instanceof Error) {
+          setError(err.message);
+        } else {
+          setError("An unexpected error occurred.");
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+
+    // 4. Clean up ongoing fetch if component unmounts
+    return () => {
+      controller.abort();
+    };
+  }, []);
+
+  // DaisyUI Loading Spinner State
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-3">
+        <span className="loading loading-spinner loading-lg text-primary"></span>
+        <p className="text-base-content/70 text-sm font-medium">
+          Loading GitHub Users...
+        </p>
+      </div>
+    );
+  }
+
+  // DaisyUI Alert Error State
+  if (error) {
+    return (
+      <div className="max-w-md mx-auto my-8">
+        <div className="alert alert-error 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>
+      </div>
+    );
+  }
+
+  return (
+    <section className="container mx-auto p-6 max-w-5xl">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-base-300 pb-4 mb-8">
+        <div>
+          <h2 className="text-3xl font-black text-base-content tracking-tight">
+            GitHub Users
+          </h2>
+          <p className="text-sm text-base-content/60 mt-1">
+            Fetched directly from GitHub API
+          </p>
+        </div>
+        <div className="badge badge-primary badge-outline font-semibold">
+          {users.length} Users
+        </div>
+      </div>
+
+      {/* Users Grid */}
+      <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        {users.map((user) => {
+          const { id, login, avatar_url, html_url } = user;
+          return (
+            <li key={id}>
+              {/* DaisyUI Card Component */}
+              <div className="card bg-base-100 shadow-md border border-base-200 hover:shadow-xl transition-all duration-200">
+                <figure className="px-6 pt-6">
+                  {/* DaisyUI Avatar Container */}
+                  <div className="avatar">
+                    <div className="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
+                      {/* <img src={avatar_url} alt={`${login}'s avatar`} /> */}
+                      <Image
+                        src={avatar_url}
+                        alt={`${login}'s avatar`}
+                        width={600}
+                        height={600}
+                      />
+                    </div>
+                  </div>
+                </figure>
+                <div className="card-body items-center text-center p-5">
+                  <h3 className="card-title text-lg font-bold capitalize text-base-content">
+                    {login}
+                  </h3>
+                  <div className="card-actions mt-3 w-full">
+                    <a
+                      href={html_url}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="btn btn-primary btn-sm btn-block font-medium"
+                    >
+                      View Profile
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+};
+
+export default FetchGitUsers;
@@ -0,0 +1,41 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useState } from "react";
+
+export default function UserProfileClient() {
+  // 1. Read dynamic route params from context using TypeScript generics
+  const params = useParams<{ userId: string }>();
+  const userId = params.userId;
+
+  const [isFollowing, setIsFollowing] = useState<boolean>(false);
+
+  return (
+    <div className="card w-96 bg-base-100 shadow-xl border border-base-200">
+      <div className="card-body">
+        <div className="flex justify-between items-center">
+          <h2 className="card-title text-base-content">Client Component</h2>
+          <span className="badge badge-accent badge-outline">useParams()</span>
+        </div>
+
+        <p className="py-2 text-sm text-base-content/70">
+          Loaded Profile for User ID:{" "}
+          <span className="badge badge-neutral font-mono font-semibold">
+            {userId}
+          </span>
+        </p>
+
+        <div className="card-actions justify-end mt-4">
+          <button
+            onClick={() => setIsFollowing(!isFollowing)}
+            className={`btn ${
+              isFollowing ? "btn-outline btn-error" : "btn-primary"
+            }`}
+          >
+            {isFollowing ? "Unfollow" : "Follow User"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,26 @@
+import UserProfileClient from "./UserProfileClient";
+import UseEffectBasics from "./useEffect-demo";
+import FetchGitUsers from "./FetchGitUsers";
+
+export default function UserPage() {
+  return (
+    <main className="bg-base-200 p-8 flex flex-col items-center justify-center">
+      <div className="max-w-md w-full space-y-6">
+        <header className="text-center">
+          <h1 className="text-3xl font-extrabold text-base-content tracking-tight">
+            User Dashboard
+          </h1>
+          <p className="text-sm text-base-content/60 mt-1">
+            Next.js Navigation
+          </p>
+        </header>
+
+        {/* Client Component */}
+
+        <UserProfileClient />
+        {/* <UseEffectBasics /> */}
+        {/* <FetchGitUsers /> */}
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,37 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+const UseEffectBasics = () => {
+  const [value, setValue] = useState(0);
+
+  const handleClick = () => {
+    setValue(value + 1);
+  };
+
+  const sayHello = () => {
+    console.log("hello there");
+  };
+
+  useEffect(() => {
+    sayHello();
+  });
+
+  // useEffect(() => {
+  //   sayHello();
+  // }, []);
+
+  // useEffect(() => {
+  //   sayHello();
+  // }, [value]);
+
+  return (
+    <div className="card w-96 bg-base-100 shadow-xl border border-base-200">
+      <h1>value : {value}</h1>
+      <button className="btn" onClick={handleClick}>
+        click me
+      </button>
+    </div>
+  );
+};
+export default UseEffectBasics;
@@ -0,0 +1,22 @@
+"use client";
+
+import { refreshWeatherData } from "@/app/actions";
+import { useTransition, JSX } from "react";
+
+export default function RefreshButton(): JSX.Element {
+  const [isPending, startTransition] = useTransition();
+
+  return (
+    <button
+      className="btn btn-primary"
+      disabled={isPending}
+      onClick={() => {
+        startTransition(async () => {
+          await refreshWeatherData();
+        });
+      }}
+    >
+      {isPending ? "Refreshing..." : "Refresh Weather Now"}
+    </button>
+  );
+}
@@ -0,0 +1,132 @@
+import { JSX } from "react";
+import RefreshButton from "./RefreshButton";
+
+// 1. Define explicit TypeScript interfaces for the Open-Meteo response
+interface OpenMeteoResponse {
+  current: {
+    time: string;
+    temperature_2m: number;
+    relative_humidity_2m: number;
+    wind_speed_10m: number;
+    weather_code: number;
+  };
+  current_units: {
+    temperature_2m: string;
+    relative_humidity_2m: string;
+    wind_speed_10m: string;
+  };
+}
+
+// Map WMO Weather Interpretation Codes to friendly labels & badge styles
+// https://emojipedia.org/ copy and paste!
+function getWeatherInfo(code: number): { label: string; badgeClass: string } {
+  if (code === 0) return { label: "Clear Sky ☀️", badgeClass: "badge-warning" };
+  if (code >= 1 && code <= 3)
+    return { label: "Partly Cloudy ⛅", badgeClass: "badge-info" };
+  if (code >= 45 && code <= 48)
+    return { label: "Foggy 🌫️", badgeClass: "badge-ghost" };
+  if (code >= 51 && code <= 67)
+    return { label: "Rain / Drizzle 🌧️", badgeClass: "badge-primary" };
+  if (code >= 71 && code <= 77)
+    return { label: "Snow ❄️", badgeClass: "badge-secondary" };
+  return { label: "Stormy ⛈️", badgeClass: "badge-error" };
+}
+
+// 2. Async Server Component - direct data fetching on the server
+export default async function WeatherPage(): Promise<JSX.Element> {
+  // Fetching London forecast from Open-Meteo (No API key needed)
+  const res = await fetch(
+    "https://api.open-meteo.com/v1/forecast?latitude=51.5074&longitude=-0.1278&current=temperature_2m,relative_humidity_2m,wind_speed_10m,weather_code",
+    {
+      // Revalidate every 10 minutes (ISR - Incremental Static Regeneration)
+      next: { revalidate: 600 }
+      // next: {
+      //   tags: ["weather-data"] // <--- Label this request with a tag
+      // }
+    }
+  );
+
+  // -------------------------------------------------------------
+  // ⏳ SIMULATION DELAY
+  // Slows down the revalidation so the STALE window stays open.
+  // await new Promise((resolve) => setTimeout(resolve, 3000));
+  // -------------------------------------------------------------
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch weather data from Open-Meteo.");
+  }
+
+  const data: OpenMeteoResponse = await res.json();
+  const weather = getWeatherInfo(data.current.weather_code);
+
+  return (
+    <main className="min-h-screen bg-base-200 p-8 flex justify-center items-center">
+      {/* daisyUI Card Container */}
+      <div className="card w-96 bg-base-100 shadow-xl border border-base-300">
+        <div className="card-body">
+          {/* Header section with Location & Condition Badge */}
+          <div className="flex justify-between items-center">
+            <h2 className="card-title text-2xl font-bold">London Weather</h2>
+            <span
+              className={`badge ${weather.badgeClass} gap-2 p-3 font-semibold`}
+            >
+              {weather.label}
+            </span>
+          </div>
+
+          <p className="text-xs text-base-content/60">
+            Last updated: {new Date(data.current.time).toLocaleTimeString()}
+          </p>
+
+          <div className="divider my-2"></div>
+
+          {/* daisyUI Stats Grid */}
+          <div className="stats stats-vertical shadow bg-base-200">
+            {/* Temperature Stat */}
+            <div className="stat">
+              <div className="stat-title">Temperature</div>
+              <div className="stat-value text-primary">
+                {data.current.temperature_2m}
+                <span className="text-2xl font-normal ml-1">
+                  {data.current_units.temperature_2m}
+                </span>
+              </div>
+              <div className="stat-desc">Real-time server reading</div>
+            </div>
+
+            {/* Humidity Stat */}
+            <div className="stat">
+              <div className="stat-title">Humidity</div>
+              <div className="stat-value text-secondary">
+                {data.current.relative_humidity_2m}
+                <span className="text-xl font-normal ml-1">
+                  {data.current_units.relative_humidity_2m}
+                </span>
+              </div>
+              <div className="stat-desc">Relative humidity</div>
+            </div>
+
+            {/* Wind Speed Stat */}
+            <div className="stat">
+              <div className="stat-title">Wind Speed</div>
+              <div className="stat-value text-accent">
+                {data.current.wind_speed_10m}
+                <span className="text-xl font-normal ml-1">
+                  {data.current_units.wind_speed_10m}
+                </span>
+              </div>
+              <div className="stat-desc">10m surface level</div>
+            </div>
+          </div>
+
+          <div className="card-actions justify-end mt-4">
+            <button className="btn btn-sm btn-outline btn-accent">
+              Live Data (Server Fetched)
+            </button>
+          </div>
+          <RefreshButton />
+        </div>
+      </div>
+    </main>
+  );
+}