80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import type { Category, Part } from "@/types/gunbuilder";
|
|
import { PartCard } from "@/components/PartCard";
|
|
|
|
interface CategoryColumnProps {
|
|
category: Category;
|
|
parts: Part[];
|
|
selectedPartId?: string;
|
|
onSelectPart: (partId: string) => void;
|
|
}
|
|
|
|
export function CategoryColumn({
|
|
category,
|
|
parts,
|
|
selectedPartId,
|
|
onSelectPart,
|
|
}: CategoryColumnProps) {
|
|
// Show selected part if available, otherwise show placeholder
|
|
const displayedPart = selectedPartId
|
|
? parts.find((p) => p.id === selectedPartId)
|
|
: null;
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="mb-3">
|
|
<h2 className="text-xs font-semibold tracking-[0.15em] text-zinc-400 uppercase">
|
|
{category.name}
|
|
</h2>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto pr-1">
|
|
{parts.length === 0 && (
|
|
<p className="text-xs text-zinc-500">No parts available yet.</p>
|
|
)}
|
|
{!displayedPart && parts.length > 0 && (
|
|
<div className="w-full border border-zinc-700 rounded-md p-3 mb-2 flex items-center justify-between gap-3">
|
|
<p className="text-sm text-zinc-500">No part selected</p>
|
|
<Link
|
|
href={`/builder/${category.id}`}
|
|
className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/60 px-3 py-1.5 text-xs font-medium text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
|
|
>
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 4v16m8-8H4"
|
|
/>
|
|
</svg>
|
|
Choose a Part
|
|
</Link>
|
|
</div>
|
|
)}
|
|
{displayedPart && (
|
|
<PartCard
|
|
key={displayedPart.id}
|
|
part={displayedPart}
|
|
selected={displayedPart.id === selectedPartId}
|
|
onSelect={() => onSelectPart(displayedPart.id)}
|
|
/>
|
|
)}
|
|
</div>
|
|
{parts.length >= 1 && (
|
|
<Link
|
|
href={`/builder/${category.id}`}
|
|
className="mt-2 w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-3 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors text-center"
|
|
>
|
|
View All ({parts.length})
|
|
</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|