more

2025-11-25 17:14:52 -05:00
parent b2171fec3b
commit 0471810118
77 changed files with 1255 additions and 66 deletions
@@ -0,0 +1,101 @@
+"use client";
+
+import type { RetailerOffer } from "@/app/gunbuilder/[categoryId]/[partId]/data";
+
+interface RetailersListProps {
+  retailers: RetailerOffer[];
+}
+
+export function RetailersList({ retailers }: RetailersListProps) {
+  if (retailers.length === 0) {
+    return (
+      <div className="text-sm text-zinc-500 text-center py-4">
+        No retailer offers available.
+      </div>
+    );
+  }
+
+  const lowestPrice = Math.min(...retailers.map((r) => r.price));
+
+  return (
+    <div className="w-full">
+      <div className="mb-4">
+        <div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400">
+          Available Retailers
+        </div>
+        <div className="mt-1 text-xs text-zinc-500">
+          {retailers.length} retailer{retailers.length !== 1 ? "s" : ""} found
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {retailers.map((retailer) => {
+          const isLowestPrice = retailer.price === lowestPrice;
+          const isOnSale = retailer.originalPrice !== undefined;
+
+          return (
+            <div
+              key={retailer.id}
+              className={`border rounded-md p-3 transition-colors ${
+                retailer.inStock
+                  ? "border-zinc-700 bg-zinc-900/30 hover:border-zinc-600"
+                  : "border-zinc-800 bg-zinc-900/20 opacity-60"
+              }`}
+            >
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-sm font-semibold text-zinc-50">
+                      {retailer.retailerName}
+                    </span>
+                    {isLowestPrice && retailer.inStock && (
+                      <span className="text-[0.65rem] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-amber-400/20 text-amber-300 border border-amber-400/30">
+                        Best Price
+                      </span>
+                    )}
+                    {!retailer.inStock && (
+                      <span className="text-[0.65rem] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-red-500/20 text-red-400 border border-red-500/30">
+                        Out of Stock
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={`text-lg font-semibold ${
+                        isLowestPrice && retailer.inStock
+                          ? "text-amber-300"
+                          : "text-zinc-300"
+                      }`}
+                    >
+                      ${retailer.price.toFixed(2)}
+                    </span>
+                    {isOnSale && retailer.originalPrice && (
+                      <span className="text-xs text-zinc-500 line-through">
+                        ${retailer.originalPrice.toFixed(2)}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <a
+                    href={retailer.affiliateUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={`rounded-md border px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap ${
+                      retailer.inStock
+                        ? "border-amber-400/60 bg-amber-400/10 text-amber-200 hover:bg-amber-400/15"
+                        : "border-zinc-700 bg-zinc-800/50 text-zinc-500 cursor-not-allowed pointer-events-none"
+                    }`}
+                  >
+                    {retailer.inStock ? "Buy Now" : "Unavailable"}
+                  </a>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+