changing to SortTable

src/app/Products/barrels/page.tsx

@@ -3,6 +3,7 @@ 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";
+import SortTable from "@src/components/SortTable";
 
 export default async function BarrelsPage() {
   const data = await getProductType('Barrels');
@@ -11,7 +12,7 @@ export default async function BarrelsPage() {
     <div>
       <PageHero title="Barrels" />
       <div className="container mx-auto">
-        <ProductTable data={data}></ProductTable>
+        <SortTable data={data}></SortTable>
       </div>
     </div>
   );

src/app/Products/handguards/page.tsx

@@ -2,6 +2,7 @@ import { getARHandGuards } from "@queries/PSA";
 import styles from '../styles.module.css';
 import PageHero from "@src/components/PageHero";
 import ProductTable from "@src/components/ProductTable";
+import SortTable from "@src/components/SortTable";
 
 export default async function HamdGuardsPage() {
   const data = await getARHandGuards();
@@ -10,7 +11,7 @@ export default async function HamdGuardsPage() {
     <div>
       <PageHero title="Hand Guards" />
       <div className="container mx-auto">
-        <ProductTable data={data}></ProductTable>
+        <SortTable data={data}></SortTable>
       </div>
     </div>
   );

src/app/Products/magazines/page.tsx

@@ -0,0 +1,19 @@
+import { getMags } from "@queries/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";
+import SortTable from "@src/components/SortTable";
+
+export default async function MagsPage() {
+  const data = await getMags();
+
+  return (
+    <div>
+      <PageHero title="Magazines" />
+      <div className="container mx-auto">
+        <SortTable data={data}></SortTable>
+      </div>
+    </div>
+  );
+}

src/app/Products/muzzle-devices/page.tsx

@@ -3,6 +3,7 @@ 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";
+import SortTable from "@src/components/SortTable";
 
 export default async function MuzzleDevices() {
   const data = await getMuzzleDevices();
@@ -11,7 +12,7 @@ export default async function MuzzleDevices() {
     <div>
       <PageHero title="Muzzle Devices" />
       <div className="container mx-auto">
-        <ProductTable data={data}></ProductTable>
+        <SortTable data={data}></SortTable>
       </div>
     </div>
   );

src/app/Products/parts/page.tsx

@@ -2,13 +2,14 @@ import { getARParts } from "@queries/PSA";
 import partTypes from 'src/data/parts_cats.json';
 import styles from '../styles.module.css';
 import ProductTable from "@src/components/ProductTable";
+import SortTable from "@src/components/SortTable";
 
 export default async function PartsPage() {
   const data = await getARParts();
 
   return (
     <div className="container mx-auto">
-      <ProductTable data={data}></ProductTable>
+      <SortTable data={data}></SortTable>
     </div>
   );
 }

src/app/Products/stocks/page.tsx

@@ -4,6 +4,7 @@ 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";
+import SortTable from "@src/components/SortTable";
 
 export default async function StocksPage() {
   const psa = await getStocks();
@@ -12,7 +13,7 @@ export default async function StocksPage() {
     <div>
       <PageHero title="Stocks" />
       <div className="container mx-auto">
-       <ProductTable data={psa}></ProductTable>
+       <SortTable data={psa}></SortTable>
       </div>
     </div>
   );

src/app/Products/triggers/page.tsx

@@ -4,6 +4,7 @@ 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";
+import SortTable from "@src/components/SortTable";
 
 export default async function TriggersPage() {
   const psa = await getARTriggers();
@@ -12,7 +13,7 @@ export default async function TriggersPage() {
     <div>
       <PageHero title="AR Triggers" />
       <div className="container mx-auto">
-        <ProductTable data={psa}></ProductTable>
+        <SortTable data={psa}></SortTable>
       </div>
     </div>
   );