added product list page

src/pages/ProductList.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from "react";
+import { Link } from 'react-router-dom';
 // import { ProductResponse } from '../interfaces';
 
-const BASE_URL = "https://3dprinter-web-api.benhalverson.workers.dev/list";
+const BASE_URL = "https://3dprinter-web-api.benhalverson.workers.dev/products";
 // const BASE_URL = "http://localhost:8787/products";
 
 function ProductList() {
@@ -24,23 +25,46 @@ function ProductList() {
 		getData();
 	}, []);
 	return (
-		<ul>
-			{products.map((product, i) => (
-				<li key={i}>{product.name}</li>
-			))}
-		</ul>
+		<div className='bg-white'>
+			<div className='container mx-auto px-4 py-8'>
+				<h1 className='text-3xl font-semibold'>Products</h1>
+				<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-8'>
+					{products.map((product) => (
+						<div key={product.id} className='bg-white rounded-lg shadow-md'>
+							<img
+								src={product.image}
+								alt={product.name}
+								className='w-full h-48 object-cover object-center rounded-t-lg'
+							/>
+							<div className='p-4'>
+								<h2 className='text-xl font-semibold'>{product.name}</h2>
+								<p className='text-gray-500 mt-2'>{product.description}</p>
+								<p className='text-gray-500 mt-2'>{product.price}</p>
+								<Link
+									to={`/product/${product.id}`}
+									className='block bg-blue-500 hover:bg-blue-400 text-white font-semibold text-center rounded-lg px-4 py-2 mt-4'
+								>
+									View Product
+								</Link>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
 	);
 }
 
 export default ProductList;
 
 
-interface ProductResponse {
-	name: string;
-	id: string;
-	stl: string;
-	description: string;
-	image: string;
-	price: number;
+export interface ProductResponse {
+	id:           number;
+	name:         string;
+	description:  string;
+	image:        string;
+	stl:          string;
+	price:        number;
 	filamentType: string;
-}
+	color:        string;
+}