From 69ff5e14330ced1756c40a771ccbd71b42b649aa Mon Sep 17 00:00:00 2001
From: Sean S <sean@goforward.group>
Date: Tue, 14 Jan 2025 17:03:18 -0500
Subject: [PATCH] small changes

---
 src/app/Builder/page.tsx | 185 +++++++++++++++++++++++++--------------
 tailwind.config.ts       |  10 +--
 2 files changed, 124 insertions(+), 71 deletions(-)

diff --git a/src/app/Builder/page.tsx b/src/app/Builder/page.tsx
index 9b8e50c..c25f6b1 100644
--- a/src/app/Builder/page.tsx
+++ b/src/app/Builder/page.tsx
@@ -1,100 +1,153 @@
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { getPSA, getLowerBuildKits, getGrips } from "@queries/PSA";
-import { psa } from "@schemas/schema";
-import partTypes from "src/data/parts_cats.json";
+import { PlusIcon } from "@heroicons/react/24/outline";
+import Link from 'next/link';
 
-export default async function BuilderPage() {
-  const psa = await getGrips();
+import { Fragment } from "react";
+
+const partsData = [
+  {
+    group: "Lower Parts",
+    parts: [
+      {
+        name: "Lower Receiver",
+        link: "/lowers",
+        source: "Palmetto State Armory",
+        price: "199.99",
+        ship_price: "8.99",
+      },
+      {
+        name: "Lower Parts Kit",
+        source: "-",
+        price: "-",
+        ship_price: "-",
+      },
+      {
+        name: "Lower Parts Kit",
+        source: "-",
+        price: "-",
+        ship_price: "-",
+      },
+      {
+        name: "Lower Parts Kit",
+        source: "-",
+        price: "-",
+        ship_price: "-",
+      },
+      {
+        name: "Lower Parts Kit",
+        source: "-",
+        price: "-",
+        ship_price: "-",
+      },
+    ],
+  },
+  {
+    group: "Upper Parts",
+    parts: [
+      { name: "Upper Reciever", source: "-", price: "-", ship_price: "-" },
+      { name: "Barrel", source: "-", price: "-", ship_price: "-" },
+      { name: "BCG", source: "-", price: "-", ship_price: "-" },
+      { name: "Muzzle Device", source: "-", price: "-", ship_price: "-" },
+      {
+        name: "Charging Handle",
+        source: "-",
+        price: "-",
+        ship_price: "-",
+      },
+    ],
+  },
+];
+
+export default function BuilderPage() {
   return (
-    <div className="p-4 sm:p-6 lg:p-8">
+    <div className="p-4 sm:px-6 lg:px-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>
+          <h1 className="text-base font-semibold text-gray-900">
+            Choose your Components
+          </h1>
         </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>
+            <table className="min-w-full">
+              <thead className="bg-white">
+                {/* Need to Fix Headers to align with other product tables */}
                 <tr>
                   <th
                     scope="col"
-                    className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 "
+                    className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3"
                   >
-                    <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>
+                    Components
                   </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>
+                    Source
                   </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>
+                    Price
                   </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>
+                    Shipping
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-8 py-3.5 text-right text-sm font-semibold text-gray-900"
+                  >
+                    Purchase
                   </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 ">
-                      {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 className="bg-white">
+                {/* Need to fix this to pull in parts that a user chooses during build process */}
+                {partsData.map((group, groupIndex) => (
+                  <Fragment key={groupIndex}>
+                    <tr className="border-t border-gray-200">
+                      <th
+                        scope="colgroup"
+                        colSpan={5}
+                        className="bg-gray-100 py-2 pl-4 pr-3 text-left text-sm uppercase font-semibold text-gray-900 sm:pl-3"
+                      >
+                        {group.group}
+                      </th>
+                    </tr>
+                    {group.parts.map((part, partIndex) => (
+                      <tr key={partIndex}>
+                        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3">
+                          <Link href={part.link}>{part.name}</Link>
+                        </td>
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {part.source}
+                        </td>
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {part.price}
+                        </td>
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {part.ship_price}
+                        </td>
+                        <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3">
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-x-1.5 rounded-md 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"
+                          >
+                            <PlusIcon
+                              aria-hidden="true"
+                              className="-ml-0.5 size-5"
+                            />
+                            Purchase
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </Fragment>
                 ))}
               </tbody>
             </table>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4ee43d0..d607e67 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -53,11 +53,11 @@ export default {
   				'5': 'hsl(var(--chart-5))'
   			}
   		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
+  		// borderRadius: {
+  		// 	lg: 'var(--radius)',
+  		// 	md: 'calc(var(--radius) - 2px)',
+  		// 	sm: 'calc(var(--radius) - 4px)'
+  		// }
   	}
   },
   plugins: [require("tailwindcss-animate")],