mirror of
https://gitea.gofwd.group/dstrawsb/ballistic-builder.git
synced 2025-12-05 18:26:45 -05:00
table styling, other stuff
This commit is contained in:
@@ -2,16 +2,15 @@ import { getGrips } 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 GripsPage() {
|
||||
const data = await getGrips();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHero title="AR Grips" />
|
||||
<div className="container mx-auto">
|
||||
<ProductTable data={data}></ProductTable>
|
||||
<SortTable data={data}></SortTable>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
40
src/app/Products/layout.tsx
Normal file
40
src/app/Products/layout.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import Footer from "@src/components/footer";
|
||||
import Navbar from "@src/components/Navbar";
|
||||
import PopNav from "@src/components/PopNav/page";
|
||||
import PageHero from "@src/components/PageHero";
|
||||
|
||||
export const metadata = {
|
||||
title: "Ballistic Builder",
|
||||
description: "Built by Forward Group, LLC",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<div className="flex min-h-full flex-col">
|
||||
<Navbar />
|
||||
<PopNav />
|
||||
<PageHero title="Category" />
|
||||
<div className="mx-auto flex w-full max-w-7xl items-start gap-x-8 ">
|
||||
<aside className="sticky top-8 hidden w-44 shrink-0 lg:block pt-4">
|
||||
{/* Left column area */}
|
||||
<h1>Filters go here</h1>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -4,16 +4,15 @@ import { psa } from "@db/schema/Psa";
|
||||
import styles from "../styles.module.css";
|
||||
import PageHero from "@components/PageHero";
|
||||
import Link from "next/link";
|
||||
import ProductTable from "@src/components/ProductTable";
|
||||
import SortTable from "@src/components/SortTable";
|
||||
|
||||
export default async function LowerReceiverPage() {
|
||||
const data = await getProductType(partTypes["AR COMPLETE LOWERS"]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHero title="Lowers"/>
|
||||
<div className="container mx-auto py-5">
|
||||
<ProductTable data={data}></ProductTable>
|
||||
<SortTable data={data}></SortTable>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,7 @@ import Navbar from "../components/Navbar";
|
||||
import PopNav from "@src/components/PopNav/page";
|
||||
import { Roboto } from 'next/font/google'
|
||||
import constants from "@src/lib/constants";
|
||||
import Footer from "@src/components/footer";
|
||||
|
||||
export const metadata = {
|
||||
title: constants.APP_NAME,
|
||||
@@ -26,6 +27,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
|
||||
<Navbar />
|
||||
<PopNav />
|
||||
{children}
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
@@ -6,7 +6,7 @@ interface PageHeroProps {
|
||||
|
||||
export default function PageHero({ title }: PageHeroProps) {
|
||||
return (
|
||||
<div className="mb-6 bg-slate-700 text-center py-10">
|
||||
<div className=" bg-slate-700 text-center py-10">
|
||||
<h1 className="text-2xl uppercase text-white font-bold">{title}</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { psa } from "@db/schema/Psa";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default async function ProductTable(props: any) {
|
||||
|
||||
return (
|
||||
|
||||
131
src/components/SortTable/index.tsx
Normal file
131
src/components/SortTable/index.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
import { CheckCircleIcon, PlusCircleIcon } from "@heroicons/react/20/solid";
|
||||
|
||||
import Image from "next/image";
|
||||
|
||||
export default async function SortTable(props: any) {
|
||||
return (
|
||||
<div className="pb-12">
|
||||
<div className="mt-8 flow-root">
|
||||
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 pl-4 pr-3 text-left text-xs font-semibold text-gray-900 "
|
||||
>
|
||||
<a href="#" className="group inline-flex">
|
||||
Component
|
||||
<span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
|
||||
<ChevronDownIcon
|
||||
aria-hidden="true"
|
||||
className="size-5"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
|
||||
>
|
||||
<a href="#" className="group inline-flex">
|
||||
Manufacturer
|
||||
<span className="ml-2 flex-none rounded bg-gray-100 text-gray-900 group-hover:bg-gray-200">
|
||||
<ChevronDownIcon
|
||||
aria-hidden="true"
|
||||
className="size-5"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
|
||||
>
|
||||
<a href="#" className="group inline-flex">
|
||||
Part Number
|
||||
<span className="ml-2 flex-none rounded bg-gray-100 text-gray-900 group-hover:bg-gray-200">
|
||||
<ChevronDownIcon
|
||||
aria-hidden="true"
|
||||
className="size-5"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
|
||||
>
|
||||
<a href="#" className="group inline-flex">
|
||||
Price
|
||||
<span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
|
||||
<ChevronDownIcon
|
||||
aria-hidden="true"
|
||||
className="invisible ml-2 size-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
|
||||
>
|
||||
<a href="#" className="group inline-flex">
|
||||
Purchase
|
||||
<span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
|
||||
<ChevronDownIcon
|
||||
aria-hidden="true"
|
||||
className="invisible ml-2 size-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className=" divide-y divide-gray-200 bg-white">
|
||||
{props.data.map((item: any) => (
|
||||
<tr key={item.uuid}>
|
||||
<td className="whitespace-wrap flex items-center py-4 pl-4 pr-3 text-xs font-medium text-gray-900 ">
|
||||
<Image
|
||||
src={item.imageUrl}
|
||||
alt="A image of the product"
|
||||
width="50"
|
||||
height="50"
|
||||
title="Click to see details"
|
||||
className="hover:size-60"
|
||||
></Image>
|
||||
<span className="pl-2"> {item.productName}</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
|
||||
{item.brandName}
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
|
||||
{item.modelnumber}
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
|
||||
${item.salePrice}
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-x-1.5 rounded-xl bg-lime-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-lime-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-900"
|
||||
>
|
||||
Add
|
||||
<PlusCircleIcon
|
||||
aria-hidden="true"
|
||||
className="-mr-0.5 size-5"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user