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

small product grid cleanup

Browse Source
This commit is contained in:
Sean Strawsburg
2025-12-23 06:17:34 -05:00
parent 70fac2857e
commit bb8ddb6823
1 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/parts/PartsGrid.tsx
+29 -20
View File
@@ -1,11 +1,13 @@
"use client";
import Link from "next/link";
import { Plus } from "lucide-react";
type UiPart = {
id: string;
name: string;
brand: string;
caliber?: string;
platform: string;
partRole: string;
price: number;
@@ -36,7 +38,8 @@ export default function PartsGrid(props: {
<div className="mb-3 flex items-center justify-between gap-2">
<div className="min-w-0">
<div className="truncate text-sm font-semibold text-zinc-50">
{part.brand} <span className="font-normal">— {part.name}</span>
{part.brand}{" "}
<span className="font-normal">— {part.name}</span>
</div>
</div>
@@ -89,8 +92,9 @@ export default function PartsGrid(props: {
return (
<>
{/* Header (DESKTOP ONLY) */}
<div className="hidden md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_260px] md:items-center md:gap-4 px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500"> <span className="min-w-0">Part</span>
<span className="min-w-0">Brand</span>
<div className="hidden md:grid md:grid-cols-[minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4 px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500">
<span className="min-w-0">Part</span>
<span className="text-right">Caliber</span>
<span className="text-right">Price</span>
<span className="text-right">Actions</span>
</div>
@@ -102,17 +106,27 @@ export default function PartsGrid(props: {
key={part.id}
className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
>
<div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_260px] md:items-center md:gap-4">
<div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4">
{/* Part */}
<div className="min-w-0">
<div className="truncate text-sm font-semibold text-zinc-50">
<Link
href={buildDetailHref(part)}
className="block text-sm font-semibold text-zinc-50 leading-snug line-clamp-2 break-words hover:text-amber-300 transition-colors"
title={part.name}
>
{part.name}
</div>
</Link>
{/* Dont think we need Brand in the grid */}
{/* <div className="mt-0.5 text-xs text-zinc-500 line-clamp-1">
{part.brand}
{part.caliber ? (
<span className="text-zinc-600"> • {part.caliber}</span>
) : null}
</div> */}
</div>
{/* Brand */}
<div className="min-w-0 text-xs text-zinc-400 md:text-sm">
{part.brand}
{/* Caliber (desktop) */}
<div className="hidden md:block text-sm text-zinc-300 text-right">
{part.caliber ?? "—"}
</div>
{/* Price */}
@@ -122,20 +136,15 @@ export default function PartsGrid(props: {
{/* Actions */}
<div className="flex justify-end gap-2">
<Link
href={buildDetailHref(part)}
className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:border-zinc-600 hover:bg-zinc-700"
>
View Details
</Link>
{onAddToBuild ? (
<button
type="button"
onClick={() => onAddToBuild(part)}
className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
className="inline-flex items-center justify-center h-8 w-8 rounded-md bg-amber-400 text-black hover:bg-amber-300 transition-colors"
aria-label="Add to Build"
title="Add to Build"
>
{addLabel}
<Plus className="h-4 w-4" />
</button>
) : part.buyUrl ? (
<a
@@ -161,4 +170,4 @@ export default function PartsGrid(props: {
</div>
</>
);
}
}