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,108 @@
+"use client";
+
+import type { PriceHistoryPoint } from "@/app/gunbuilder/[categoryId]/[partId]/data";
+
+interface PricingHistoryGraphProps {
+  data: PriceHistoryPoint[];
+  currentPrice: number;
+}
+
+export function PricingHistoryGraph({
+  data,
+  currentPrice,
+}: PricingHistoryGraphProps) {
+  if (data.length === 0) return null;
+
+  // Calculate chart dimensions
+  const width = 100;
+  const height = 60;
+  const padding = 4;
+
+  // Find min and max prices for scaling
+  const prices = data.map((d) => d.price);
+  const minPrice = Math.min(...prices);
+  const maxPrice = Math.max(...prices);
+  const priceRange = maxPrice - minPrice || 1; // Avoid division by zero
+
+  // Generate path points
+  const points = data.map((point, index) => {
+    const x = padding + ((index / (data.length - 1)) * (width - padding * 2));
+    const normalizedPrice = (point.price - minPrice) / priceRange;
+    const y = padding + (height - padding * 2) * (1 - normalizedPrice);
+    return { x, y, price: point.price };
+  });
+
+  // Create SVG path
+  const pathData = points
+    .map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`)
+    .join(" ");
+
+  // Create area path (for gradient fill)
+  const areaPath = `${pathData} L ${width - padding} ${height - padding} L ${padding} ${height - padding} Z`;
+
+  // Format date for display
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  };
+
+  return (
+    <div className="w-full">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400">
+            Price History (30 Days)
+          </div>
+          <div className="mt-1 text-xs text-zinc-500">
+            Current: <span className="text-amber-300 font-semibold">${currentPrice.toFixed(2)}</span>
+          </div>
+        </div>
+        <div className="text-xs text-zinc-500">
+          {formatDate(data[0].date)} - {formatDate(data[data.length - 1].date)}
+        </div>
+      </div>
+
+      <div className="relative w-full h-32 rounded-md border border-zinc-800 bg-zinc-900/30 p-3">
+        <svg
+          viewBox={`0 0 ${width} ${height}`}
+          className="w-full h-full"
+          preserveAspectRatio="none"
+        >
+          <defs>
+            <linearGradient id="priceGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor="#fbbf24" stopOpacity="0.3" />
+              <stop offset="100%" stopColor="#fbbf24" stopOpacity="0.05" />
+            </linearGradient>
+          </defs>
+          {/* Area fill */}
+          <path
+            d={areaPath}
+            fill="url(#priceGradient)"
+          />
+          {/* Line */}
+          <path
+            d={pathData}
+            fill="none"
+            stroke="#fbbf24"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          {/* Current price indicator */}
+          <circle
+            cx={points[points.length - 1].x}
+            cy={points[points.length - 1].y}
+            r="2"
+            fill="#fbbf24"
+          />
+        </svg>
+      </div>
+
+      <div className="mt-2 flex items-center justify-between text-xs text-zinc-500">
+        <span>Low: ${minPrice.toFixed(2)}</span>
+        <span>High: ${maxPrice.toFixed(2)}</span>
+      </div>
+    </div>
+  );
+}
+
@@ -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>
+  );
+}
+