new pages

pages/products.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+export default function Products() {
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch products from an API
+  useEffect(() => {
+    async function fetchProducts() {
+      try {
+        const response = await fetch("https://api.example.com/products");
+        const data = await response.json();
+        setProducts(data);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        setLoading(false);
+      }
+    }
+    fetchProducts();
+  }, []);
+
+  return (
+    <div className="bg-gray-100 min-h-screen p-6">
+      <div className="max-w-5xl mx-auto">
+        <h1 className="text-3xl font-bold text-center mb-6">Products</h1>
+        {loading ? (
+          <p className="text-center text-gray-700">Loading products...</p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {products.map((product) => (
+              <div key={product.id} className="bg-white shadow-md rounded p-4">
+                <h2 className="text-xl font-bold mb-2">{product.name}</h2>
+                <p className="text-gray-700 mb-2">{product.description}</p>
+                <p className="text-gray-900 font-bold">${product.price}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}