Added new Component ProductTable

src/components/ProductTable/index.tsx

@@ -0,0 +1,29 @@
+
+export default async function ProductTable(props:any) {
+
+  return (
+        <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
+          <thead>
+            <tr>
+              <th className='bg-slate-700 text-white pl-2 w-40'>Component</th>
+              <th className='bg-slate-700 text-white w-40'>Manufacturer</th>
+              <th className='bg-slate-700 text-white w-40'>Model #</th>
+              <th className='bg-slate-700 text-white w-40'>Price</th>
+            </tr>
+          </thead>
+          <tbody>
+            {props.data.map((item:any) => (
+              <tr key={item.upc}>
+                <td className='text-slate-800'>{item.category}</td>
+                <td className='text-slate-800'>{item.brandName}</td>
+                <td className='text-slate-800'>{item.modelnumber}</td>
+                <td className="text-slate-800 flex items-center gap-2">
+                  ${Number(item.salePrice).toFixed(2)}
+                  <button >Buy</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+  );
+}