sean/shadow-gunbuilder-ai-proto
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

more

Browse Source
This commit is contained in:
Sean Strawsburg
2025-11-25 17:14:52 -05:00
parent b2171fec3b
commit 0471810118
77 changed files with 1255 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/gunbuilder/[categoryId]/[partId]/page.tsx
+96 -58
View File
@@ -5,6 +5,9 @@ import Link from "next/link";
import { useParams } from "next/navigation";
import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
import type { CategoryId } from "@/types/gunbuilder";
import { getPricingHistory, getRetailerOffers } from "./data";
import { PricingHistoryGraph } from "@/components/PricingHistoryGraph";
import { RetailersList } from "@/components/RetailersList";
export default function PartDetailPage() {
const params = useParams();
@@ -21,6 +24,21 @@ export default function PartDetailPage() {
[partId, categoryId],
);
// Get pricing history and retailer offers
// TODO: Replace with API calls when endpoints are ready
const pricingHistory = useMemo(
() => (part ? getPricingHistory(part.id, part.price) : []),
[part],
);
const retailerOffers = useMemo(
() =>
part
? getRetailerOffers(part.id, part.price, part.affiliateUrl)
: [],
[part],
);
if (!category || !part) {
return (
<main className="min-h-screen bg-black text-zinc-50">
@@ -68,76 +86,86 @@ export default function PartDetailPage() {
{/* Product Details */}
<div className="grid gap-4 lg:grid-cols-[2fr,1fr]">
{/* Main Content */}
<section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
<div className="grid gap-6 md:grid-cols-[1fr,1fr]">
{/* Product Info */}
<div>
<div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-2">
Product Information
</div>
<div className="space-y-3">
<div>
<div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
Brand
</div>
<div className="text-lg font-semibold text-zinc-50">
{part.brand}
</div>
<section className="space-y-4">
{/* Product Information */}
<div className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
<div className="grid gap-6 md:grid-cols-[1fr,1fr]">
{/* Product Info */}
<div>
<div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-2">
Product Information
</div>
<div>
<div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
Model
</div>
<div className="text-lg font-semibold text-zinc-50">
{part.name}
</div>
</div>
<div>
<div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
Category
</div>
<div className="text-lg font-semibold text-zinc-50">
{category.name}
</div>
</div>
{part.notes && (
<div className="space-y-3">
<div>
<div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
Details
Brand
</div>
<div className="text-sm text-zinc-300 leading-relaxed">
{part.notes}
<div className="text-lg font-semibold text-zinc-50">
{part.brand}
</div>
</div>
)}
<div>
<div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
Model
</div>
<div className="text-lg font-semibold text-zinc-50">
{part.name}
</div>
</div>
<div>
<div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
Category
</div>
<div className="text-lg font-semibold text-zinc-50">
{category.name}
</div>
</div>
{part.notes && (
<div>
<div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
Details
</div>
<div className="text-sm text-zinc-300 leading-relaxed">
{part.notes}
</div>
</div>
)}
</div>
</div>
</div>
{/* Product Image */}
<div className="flex items-start justify-center">
<div className="w-full aspect-square max-w-md rounded-md border border-zinc-700 bg-zinc-900/50 flex items-center justify-center">
<div className="text-center p-8">
<svg
className="w-16 h-16 mx-auto text-zinc-600 mb-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="text-xs text-zinc-500 uppercase tracking-wide">
Product Image
</p>
{/* Product Image */}
<div className="flex items-start justify-center">
<div className="w-full aspect-square max-w-md rounded-md border border-zinc-700 bg-zinc-900/50 flex items-center justify-center">
<div className="text-center p-8">
<svg
className="w-16 h-16 mx-auto text-zinc-600 mb-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="text-xs text-zinc-500 uppercase tracking-wide">
Product Image
</p>
</div>
</div>
</div>
</div>
</div>
{/* Retailers List */}
{retailerOffers.length > 0 && (
<div className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
<RetailersList retailers={retailerOffers} />
</div>
)}
</section>
{/* Sidebar */}
@@ -149,6 +177,16 @@ export default function PartDetailPage() {
</div>
</div>
{/* Pricing History */}
{pricingHistory.length > 0 && (
<div className="mb-6">
<PricingHistoryGraph
data={pricingHistory}
currentPrice={part.price}
/>
</div>
)}
<div className="mt-auto space-y-3">
<Link
href={`/gunbuilder?select=${categoryId}:${part.id}`}