From 01c0b22bc4726a5592ceccd5c11756393bcd8ffc Mon Sep 17 00:00:00 2001
From: Sean S <sean@goforward.group>
Date: Fri, 13 Dec 2024 14:58:08 -0500
Subject: [PATCH] new tailwindui table on bulder page

---
 src/app/Builder/page.tsx | 133 +++++++++++++++++++++++++++++----------
 src/app/page.tsx         |  15 ++---
 2 files changed, 106 insertions(+), 42 deletions(-)

diff --git a/src/app/Builder/page.tsx b/src/app/Builder/page.tsx
index 3b280ab..03f8340 100644
--- a/src/app/Builder/page.tsx
+++ b/src/app/Builder/page.tsx
@@ -1,37 +1,106 @@
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { getPSA, getLowerBuildKits, getGrips } from "@queries/PSA";
+import { psa } from "@db/schema/Psa";
+import partTypes from "src/data/parts_cats.json";
 
-
-export default function BuilderPage() {
+export default async function BuilderPage() {
+  const psa = await getGrips();
   return (
-    <div className="container mx-auto ">
-      <table className="table-auto border-separate border-spacing-2 border border-slate-500 text-gray-900">
-        <thead>
-          <tr>
-            <th>Component</th>
-            <th>Selection</th>
-            <th>Base Price</th>
-            <th>Sale Price</th>
-            <th>Shipping</th>
-            <th>Tax</th>
-            <th>Total Price</th>
-            <th>Source</th>
-            <th>Order</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Part 1</td>
-            <td>Part</td>
-            <td>99.99</td>
-            <td>89.99</td>
-            <td>12.99</td>
-            <td></td>
-            <td>Palmetto State</td>
-            <td>101.99</td>
-            <td><button>Buy Item</button></td>
-          </tr>
-          
-        </tbody>
-      </table>
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="sm:flex sm:items-center">
+        <div className="sm:flex-auto">
+          <h1 className="text-base font-semibold text-gray-900">Users</h1>
+          <p className="mt-2 text-sm text-gray-700">
+            A list of all the Grips We Could Find{" "}
+          </p>
+        </div>
+      </div>
+      <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-sm font-semibold text-gray-900 sm:pl-0"
+                  >
+                    <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-sm 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-sm 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-sm 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">
+                {psa.map((psa) => (
+                  <tr key={psa.upc}>
+                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
+                      {psa.productName}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      {psa.brandName}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      {psa.retailPrice}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      {psa.salePrice}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e69dd19..fe19844 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,14 +1,8 @@
-import About from "@components/site/About";
-import Contact from "@components/site/Contact";
-import FeaturesSection from "@components/FeaturesSection";
-import Footer from "@components/site/Footer";
-import Header from "@components/Header";
-import Hero from "@components/Hero";
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
+
 
 export default async function Home() {
   return (
-    <div className="bg-white">
+    <div className="bg-white ">
       <div className="relative isolate pt-1">
         <svg
           aria-hidden="true"
@@ -46,10 +40,11 @@ export default async function Home() {
             <div className="mt-10 flex items-top gap-x-6">
               <a
                 href="#"
-                className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                className="up rounded-md bg-lime-800 px-3.5 py-2.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-indigo-600"
               >
-                Get started
+                Get Building
               </a>
+              
             </div>
           </div>
           <div className="mt-16 sm:mt-24 alignlg:mt-0 lg:shrink-0 lg:grow items-top">