Forward/ballistic-builder
3
0
Fork 0
mirror of https://gitea.gofwd.group/dstrawsb/ballistic-builder.git synced 2025-12-05 18:26:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added new Component ProductTable

Browse Source
This commit is contained in:
Don Strawsburg
2024-12-13 15:40:55 -05:00
parent 5f3fcd86dd
commit 222e700bbf
3 changed files with 33 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/Products/barrels/page.tsx
View File

@@ -3,6 +3,7 @@ import { psa } from '@db/schema/Psa';
import partTypes from 'src/data/parts_cats.json'; 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 PageHero from "@src/components/PageHero";
import ProductTable from "@src/components/ProductTable";
export default async function BarrelsPage() { export default async function BarrelsPage() {
const psa = await getProductType('Barrels'); const psa = await getProductType('Barrels');
@@ -11,29 +12,7 @@ export default async function BarrelsPage() {
<div> <div>
<PageHero title="Barrels" /> <PageHero title="Barrels" />
<div className="container mx-auto"> <div className="container mx-auto">
<table className={"table-auto border-separate border-spacing-4 border border-slate-500"}> <ProductTable data={psa}></ProductTable>
<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>
</div> </div>
</div> </div>
); );

25
src/app/Products/muzzle-devices/page.tsx
View File

@@ -3,6 +3,7 @@ import { psa } from '@db/schema/Psa';
import partTypes from 'src/data/parts_cats.json'; 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 PageHero from "@src/components/PageHero";
import ProductTable from "@src/components/ProductTable";
export default async function MuzzleDevices() { export default async function MuzzleDevices() {
const psa = await getMuzzleDevices(); const psa = await getMuzzleDevices();
@@ -11,29 +12,7 @@ export default async function MuzzleDevices() {
<div> <div>
<PageHero title="Muzzle Devices" /> <PageHero title="Muzzle Devices" />
<div className="container mx-auto"> <div className="container mx-auto">
<table className="table-auto border-separate border-spacing-4 border border-slate-500"> <ProductTable data={psa}></ProductTable>
<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>
</div> </div>
</div> </div>
); );

29
src/components/ProductTable/index.tsx Normal file
View File

@@ -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>
);
}