stuff
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
|
||||
import type { CategoryId } from "@/types/gunbuilder";
|
||||
|
||||
export default function PartDetailPage() {
|
||||
const params = useParams();
|
||||
const categoryId = params.categoryId as CategoryId;
|
||||
const partId = params.partId as string;
|
||||
|
||||
const category = useMemo(
|
||||
() => CATEGORIES.find((c) => c.id === categoryId),
|
||||
[categoryId],
|
||||
);
|
||||
|
||||
const part = useMemo(
|
||||
() => PARTS.find((p) => p.id === partId && p.categoryId === categoryId),
|
||||
[partId, categoryId],
|
||||
);
|
||||
|
||||
if (!category || !part) {
|
||||
return (
|
||||
<main className="min-h-screen bg-black text-zinc-50">
|
||||
<div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-semibold text-zinc-50 mb-4">
|
||||
Product Not Found
|
||||
</h1>
|
||||
<Link
|
||||
href="/gunbuilder"
|
||||
className="text-amber-300 hover:text-amber-200 underline"
|
||||
>
|
||||
Return to Gunbuilder
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-black text-zinc-50">
|
||||
<div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
|
||||
{/* Header */}
|
||||
<header className="mb-6">
|
||||
<Link
|
||||
href={`/gunbuilder/${categoryId}`}
|
||||
className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
|
||||
>
|
||||
← Back to {category.name}
|
||||
</Link>
|
||||
<div>
|
||||
<p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
|
||||
Shadow Standard
|
||||
</p>
|
||||
<h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
|
||||
{part.brand} <span className="text-amber-300">{part.name}</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400 max-w-xl">
|
||||
{category.name} • Product Details
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 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>
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
</section>
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside className="rounded-lg border border-zinc-800 bg-zinc-950/80 p-4 md:p-6 flex flex-col">
|
||||
<div className="mb-4">
|
||||
<div className="text-xs text-zinc-400 mb-2">Price</div>
|
||||
<div className="text-3xl font-semibold text-amber-300">
|
||||
${part.price.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto space-y-3">
|
||||
<Link
|
||||
href={`/gunbuilder?select=${categoryId}:${part.id}`}
|
||||
className="block w-full rounded-md border border-amber-400/60 bg-amber-400/10 px-4 py-3 text-sm font-medium text-amber-200 hover:bg-amber-400/15 text-center transition-colors"
|
||||
>
|
||||
Add to Build
|
||||
</Link>
|
||||
<a
|
||||
href={part.affiliateUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-4 py-3 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 text-center transition-colors"
|
||||
>
|
||||
View Retailer
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user