setting up dark/white mode. fixed some other small things
This commit is contained in:
@@ -19,7 +19,6 @@ export default function PartsGrid(props: {
|
||||
parts: UiPart[];
|
||||
buildDetailHref: (p: UiPart) => string;
|
||||
|
||||
// NEW: optional Add-to-Build behavior
|
||||
onAddToBuild?: (p: UiPart) => void;
|
||||
addLabel?: string;
|
||||
}) {
|
||||
@@ -32,14 +31,15 @@ export default function PartsGrid(props: {
|
||||
{parts.map((part) => (
|
||||
<div
|
||||
key={part.id}
|
||||
className="group relative flex flex-col rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all duration-200 hover:border-amber-400/60 hover:bg-amber-400/10"
|
||||
className="group relative flex flex-col 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="mb-3 flex items-center gap-2 justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-semibold text-zinc-50 truncate">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="whitespace-nowrap text-sm font-semibold text-amber-300">
|
||||
${part.price.toFixed(2)}
|
||||
</div>
|
||||
@@ -48,17 +48,16 @@ export default function PartsGrid(props: {
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Link
|
||||
href={buildDetailHref(part)}
|
||||
className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
|
||||
className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 hover:border-zinc-600 hover:bg-zinc-700"
|
||||
>
|
||||
View Details
|
||||
</Link>
|
||||
|
||||
{/* NEW: Add to Build (preferred primary action if provided) */}
|
||||
{onAddToBuild ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAddToBuild(part)}
|
||||
className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
|
||||
className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
|
||||
>
|
||||
{addLabel}
|
||||
</button>
|
||||
@@ -67,7 +66,7 @@ export default function PartsGrid(props: {
|
||||
href={part.buyUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
|
||||
className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
|
||||
>
|
||||
Buy
|
||||
</a>
|
||||
@@ -80,7 +79,6 @@ export default function PartsGrid(props: {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -90,38 +88,43 @@ export default function PartsGrid(props: {
|
||||
// LIST view
|
||||
return (
|
||||
<>
|
||||
<div className="hidden grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 md:grid">
|
||||
<span>Part</span>
|
||||
<span>Brand</span>
|
||||
{/* 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>
|
||||
<span className="text-right">Price</span>
|
||||
<span className="pr-2 text-right">Actions</span>
|
||||
<span className="text-right">Actions</span>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
<div className="space-y-2">
|
||||
{parts.map((part) => (
|
||||
<div
|
||||
key={part.id}
|
||||
className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all duration-200 hover:border-amber-400/60 hover:bg-amber-400/10"
|
||||
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)_auto] md:items-center md:gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-semibold text-zinc-50 truncate">
|
||||
<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">
|
||||
{/* Part */}
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-semibold text-zinc-50">
|
||||
{part.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-zinc-400 md:text-left md:text-sm">
|
||||
{/* Brand */}
|
||||
<div className="min-w-0 text-xs text-zinc-400 md:text-sm">
|
||||
{part.brand}
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="text-sm font-semibold text-amber-300 md:text-right">
|
||||
${part.price.toFixed(2)}
|
||||
</div>
|
||||
|
||||
{/* 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 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
|
||||
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>
|
||||
@@ -130,7 +133,7 @@ export default function PartsGrid(props: {
|
||||
<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 transition-colors"
|
||||
className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
|
||||
>
|
||||
{addLabel}
|
||||
</button>
|
||||
@@ -139,7 +142,7 @@ export default function PartsGrid(props: {
|
||||
href={part.buyUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
|
||||
className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
|
||||
>
|
||||
Buy
|
||||
</a>
|
||||
@@ -153,7 +156,6 @@ export default function PartsGrid(props: {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user