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

table styling, other stuff

Browse Source
This commit is contained in:
Sean S
2024-12-14 07:33:36 -05:00
parent 8896229fac
commit a1060ec9e5
7 changed files with 179 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/PageHero/index.tsx
View File

@@ -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
src/components/ProductTable/index.tsx
View File

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