not work [id].tsx page

src/app/product/[id].tsx

@@ -0,0 +1,128 @@
+import { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+// Define a type for the product data
+type Product = {
+  id: string;
+  name: string;
+  image: string;
+  description: string;
+  specifications: {
+    manufacturer: string;
+    model: string;
+    weight: string;
+    dimensions: string;
+    material: string;
+    warranty: string;
+  };
+  vendors: Array<{
+    name: string;
+    price: string;
+    stock: string;
+  }>;
+};
+
+export default function ProductPage() {
+  const router = useRouter();
+  const { id } = router.query;
+  const [product, setProduct] = useState<Product | null>(null);
+
+  useEffect(() => {
+    if (id) {
+      // Fetch product data based on the id
+      fetch(`/api/products/${id}`)
+        .then((response) => response.json())
+        .then((data) => setProduct(data))
+        .catch((error) => console.error("Error fetching product data:", error));
+    }
+  }, [id]);
+
+  if (!product) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="p-4 pt-16 mx-auto max-w-screen-lg">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+        {/* Product Image */}
+        <div className="bg-white rounded-lg shadow-md p-4">
+          <img 
+            src={product.image} 
+            alt={product.name}
+            className="w-full h-auto rounded-lg"
+          />
+        </div>
+
+        {/* Product Info */}
+        <div>
+          <h1 className="text-3xl font-bold mb-4">{product.name}</h1>
+          
+          {/* Vendor Pricing Table */}
+          <div className="bg-white rounded-lg shadow-md p-4 mb-6">
+            <h2 className="text-xl font-semibold mb-4">Available From</h2>
+            <div className="overflow-x-auto">
+              <table className="min-w-full table-auto">
+                <thead>
+                  <tr className="bg-gray-50 border-b">
+                    <th className="px-4 py-2 text-left">Vendor</th>
+                    <th className="px-4 py-2 text-left">Price</th>
+                    <th className="px-4 py-2 text-left">Stock</th>
+                    <th className="px-4 py-2 text-left">Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {product.vendors.map((vendor, index) => (
+                    <tr key={index} className="border-b hover:bg-gray-50">
+                      <td className="px-4 py-2">{vendor.name}</td>
+                      <td className="px-4 py-2">{vendor.price}</td>
+                      <td className="px-4 py-2">{vendor.stock}</td>
+                      <td className="px-4 py-2">
+                        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+                          Buy Now
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Product Description */}
+      <div className="bg-white rounded-lg shadow-md p-6 mb-8">
+        <h2 className="text-xl font-semibold mb-4">Product Description</h2>
+        <p className="text-gray-600">
+          {product.description}
+        </p>
+      </div>
+
+      {/* Product Specifications */}
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <h2 className="text-xl font-semibold mb-4">Specifications</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="border-b py-2">
+            <span className="font-medium">Manufacturer:</span> {product.specifications.manufacturer}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Model:</span> {product.specifications.model}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Weight:</span> {product.specifications.weight}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Dimensions:</span> {product.specifications.dimensions}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Material:</span> {product.specifications.material}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Warranty:</span> {product.specifications.warranty}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}