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 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";
|
import SortTable from "@src/components/SortTable";
|
||||||
|
|
||||||
export default async function GripsPage() {
|
export default async function GripsPage() {
|
||||||
const data = await getGrips();
|
const data = await getGrips();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<PageHero title="AR Grips" />
|
|
||||||
<div className="container mx-auto">
|
<div className="container mx-auto">
|
||||||
<ProductTable data={data}></ProductTable>
|
<SortTable data={data}></SortTable>
|
||||||
</div>
|
</div>
|
||||||
</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 styles from "../styles.module.css";
|
||||||
import PageHero from "@components/PageHero";
|
import PageHero from "@components/PageHero";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import ProductTable from "@src/components/ProductTable";
|
import SortTable from "@src/components/SortTable";
|
||||||
|
|
||||||
export default async function LowerReceiverPage() {
|
export default async function LowerReceiverPage() {
|
||||||
const data = await getProductType(partTypes["AR COMPLETE LOWERS"]);
|
const data = await getProductType(partTypes["AR COMPLETE LOWERS"]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<PageHero title="Lowers"/>
|
|
||||||
<div className="container mx-auto py-5">
|
<div className="container mx-auto py-5">
|
||||||
<ProductTable data={data}></ProductTable>
|
<SortTable data={data}></SortTable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import Navbar from "../components/Navbar";
|
|||||||
import PopNav from "@src/components/PopNav/page";
|
import PopNav from "@src/components/PopNav/page";
|
||||||
import { Roboto } from 'next/font/google'
|
import { Roboto } from 'next/font/google'
|
||||||
import constants from "@src/lib/constants";
|
import constants from "@src/lib/constants";
|
||||||
|
import Footer from "@src/components/footer";
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: constants.APP_NAME,
|
title: constants.APP_NAME,
|
||||||
@@ -26,6 +27,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
|
|||||||
<Navbar />
|
<Navbar />
|
||||||
<PopNav />
|
<PopNav />
|
||||||
{children}
|
{children}
|
||||||
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ interface PageHeroProps {
|
|||||||
|
|
||||||
export default function PageHero({ title }: PageHeroProps) {
|
export default function PageHero({ title }: PageHeroProps) {
|
||||||
return (
|
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>
|
<h1 className="text-2xl uppercase text-white font-bold">{title}</h1>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { psa } from "@db/schema/Psa";
|
import { psa } from "@db/schema/Psa";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
export default async function ProductTable(props: any) {
|
export default async function ProductTable(props: any) {
|
||||||
|
|
||||||
return (
|
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