From ca61f2337b79725240e4bfccbf9111b31c0f6263 Mon Sep 17 00:00:00 2001
From: Don Strawsburg <don@goforward.group>
Date: Fri, 13 Dec 2024 16:03:39 -0500
Subject: [PATCH] updated to use ProductTable

Co-authored-by: sstrawsburg@gmail.com <sstrawsburg@gmail.com>
---
 src/app/Products/grips/page.tsx       |  2 ++
 src/app/Products/handguards/page.tsx  | 25 ++-----------------
 src/app/Products/stocks/page.tsx      | 25 ++-----------------
 src/app/Products/triggers/page.tsx    | 35 ++++++---------------------
 src/app/Products/uppers/page.tsx      | 25 ++-----------------
 src/components/ProductTable/index.tsx |  4 ++-
 6 files changed, 18 insertions(+), 98 deletions(-)

diff --git a/src/app/Products/grips/page.tsx b/src/app/Products/grips/page.tsx
index 2e5f3bd..061f32e 100644
--- a/src/app/Products/grips/page.tsx
+++ b/src/app/Products/grips/page.tsx
@@ -3,6 +3,7 @@ import { psa } from '@db/schema/Psa';
 import partTypes from 'src/data/parts_cats.json';
 import styles from '../styles.module.css';
 import PageHero from "@src/components/PageHero";
+import ProductTable from "@src/components/ProductTable";
 
 export default async function GripsPage() {
   const psa = await getGrips();
@@ -11,6 +12,7 @@ export default async function GripsPage() {
     <div>
       <PageHero title="AR Grips" />
       <div className="container mx-auto">
+        <ProductTable data={psa}></ProductTable>
         <table className="table-auto border-collapse border-spacing-3 border border-slate-500">
           <thead>
             <tr className={styles.tr}>
diff --git a/src/app/Products/handguards/page.tsx b/src/app/Products/handguards/page.tsx
index 9536fb2..a0b4b7e 100644
--- a/src/app/Products/handguards/page.tsx
+++ b/src/app/Products/handguards/page.tsx
@@ -3,6 +3,7 @@ import { psa } from '@db/schema/Psa';
 import partTypes from 'src/data/parts_cats.json';
 import styles from '../styles.module.css';
 import PageHero from "@src/components/PageHero";
+import ProductTable from "@src/components/ProductTable";
 
 export default async function HamdGuardsPage() {
   const psa = await getARHandGuards();
@@ -11,29 +12,7 @@ export default async function HamdGuardsPage() {
     <div>
       <PageHero title="Hand Guards" />
       <div className="container mx-auto">
-        <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
-          <thead>
-            <tr className={styles.tr}>
-              <th className='bg-slate-700 pl-2 w-40'>Component</th>
-              <th className='bg-slate-700 w-40'>Manufacturer</th>
-              <th className='bg-slate-700 w-40'>Model #</th>
-              <th className='bg-slate-700 w-40'>Price</th>
-            </tr>
-          </thead>
-          <tbody>
-            {psa.map((psa) => (
-              <tr key={psa.upc}>
-                <td className='text-slate-800'>{psa.category}</td>
-                <td className='text-slate-800'>{psa.brandName}</td>
-                <td className='text-slate-800'>{psa.modelnumber}</td>
-                <td className='text-slate-800 flex items-center gap-2'>
-                  ${Number(psa.salePrice).toFixed(2)}
-                  <button >Buy</button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <ProductTable data={psa}></ProductTable>
       </div>
     </div>
   );
diff --git a/src/app/Products/stocks/page.tsx b/src/app/Products/stocks/page.tsx
index 07e5a8f..5070f31 100644
--- a/src/app/Products/stocks/page.tsx
+++ b/src/app/Products/stocks/page.tsx
@@ -3,6 +3,7 @@ import { psa } from '@db/schema/Psa';
 import partTypes from 'src/data/parts_cats.json';
 import styles from '../styles.module.css';
 import PageHero from "@src/components/PageHero";
+import ProductTable from "@src/components/ProductTable";
 
 export default async function StocksPage() {
   const psa = await getStocks();
@@ -11,29 +12,7 @@ export default async function StocksPage() {
     <div>
       <PageHero title="Stocks" />
       <div className="container mx-auto">
-        <table className="table-auto border-separate border-spacing-4 border border-slate-500">
-          <thead>
-            <tr className={styles.tr}>
-              <th className='bg-slate-700 pl-2 w-40'>Component</th>
-              <th className='bg-slate-700 w-40'>Manufacturer</th>
-              <th className='bg-slate-700 w-40'>Model #</th>
-              <th className='bg-slate-700 w-20'>Price</th>
-            </tr>
-          </thead>
-          <tbody>
-            {psa.map((psa) => (
-              <tr key={psa.upc}>
-                <td className='text-slate-800'>{psa.category}</td>
-                <td className='text-slate-800'>{psa.brandName}</td>
-                <td className='text-slate-800'>{psa.modelnumber}</td>
-                <td className='text-slate-800 flex items-center gap-2'>
-                  ${Number(psa.salePrice).toFixed(2)}
-                  <button >Buy</button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+       <ProductTable data={psa}></ProductTable>
       </div>
     </div>
   );
diff --git a/src/app/Products/triggers/page.tsx b/src/app/Products/triggers/page.tsx
index 66a724e..7230ead 100644
--- a/src/app/Products/triggers/page.tsx
+++ b/src/app/Products/triggers/page.tsx
@@ -1,40 +1,19 @@
-import { getARTriggers} from "@queries/PSA";
+import { getARTriggers } from "@queries/PSA";
 import { psa } from '@db/schema/Psa';
 import partTypes from 'src/data/parts_cats.json';
-import  styles  from '../styles.module.css';
+import styles from '../styles.module.css';
 import PageHero from "@src/components/PageHero";
+import ProductTable from "@src/components/ProductTable";
 
 export default async function TriggersPage() {
   const psa = await getARTriggers();
 
   return (
     <div>
-    <PageHero title="AR Triggers" />
-    <div className="container mx-auto">
-      <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
-        <thead>
-          <tr className={styles.tr}>
-            <th className='bg-slate-700 w-40 pl-2'>Component</th>
-            <th className='bg-slate-700 w-40'>Manufacturer</th>
-            <th className='bg-slate-700 w-40'>Model #</th>
-            <th className='bg-slate-700 w-40'>Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {psa.map((psa) => (
-            <tr key={psa.upc}>
-              <td className='text-slate-800'>{psa.category}</td>
-              <td className='text-slate-800'>{psa.brandName}</td>
-              <td className='text-slate-800'>{psa.modelnumber}</td>
-              <td className='text-slate-800 flex items-center gap-2'>
-                ${Number(psa.salePrice).toFixed(2)}
-                <button>Buy</button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+      <PageHero title="AR Triggers" />
+      <div className="container mx-auto">
+        <ProductTable data={psa}></ProductTable>
+      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/app/Products/uppers/page.tsx b/src/app/Products/uppers/page.tsx
index 399a8b1..fae63f2 100644
--- a/src/app/Products/uppers/page.tsx
+++ b/src/app/Products/uppers/page.tsx
@@ -2,6 +2,7 @@ import { getPSA, getUpperReciever } from "@queries/PSA";
 import { psa } from '@db/schema/Psa';
 import styles from '../styles.module.css';
 import PageHero from "@src/components/PageHero";
+import ProductTable from "@src/components/ProductTable";
 
 export default async function UpperReceiverPage() {
   const psa = await getUpperReciever();
@@ -10,29 +11,7 @@ export default async function UpperReceiverPage() {
     <div>
       <PageHero title="Upper Recievers" />
       <div className="container mx-auto">
-        <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
-          <thead>
-            <tr className={styles.tr}>
-              <th className='bg-slate-700 w-40 pl-2'>Component</th>
-              <th className='bg-slate-700 w-40'>Manufacturer</th>
-              <th className='bg-slate-700 w-40'>Model #</th>
-              <th className='bg-slate-700 w-20'>Price</th>
-            </tr>
-          </thead>
-          <tbody>
-            {psa.map((psa) => (
-              <tr key={psa.upc}>
-                <td className='text-slate-800'>{psa.category}</td>
-                <td className='text-slate-800'>{psa.brandName}</td>
-                <td className='text-slate-800'>{psa.modelnumber}</td>
-                <td className='text-slate-800 flex items-center gap-2'>
-                  ${Number(psa.salePrice).toFixed(2)}
-                  <button >Buy</button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <ProductTable data={psa}></ProductTable>
       </div>
     </div>
   );
diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx
index b9d8ece..17b9f73 100644
--- a/src/components/ProductTable/index.tsx
+++ b/src/components/ProductTable/index.tsx
@@ -8,7 +8,8 @@ export default async function ProductTable(props:any) {
               <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>
+              <th className='bg-slate-700 text-white w-40'>Retail Price</th>
+              <th className='bg-slate-700 text-white w-20'>Sale Price</th>
             </tr>
           </thead>
           <tbody>
@@ -17,6 +18,7 @@ export default async function ProductTable(props:any) {
                 <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'>{item.retailPrice}</td>
                 <td className="text-slate-800 flex items-center gap-2">
                   ${Number(item.salePrice).toFixed(2)}
                   <button >Buy</button>