41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import type { Part } from "@/types/builderSlots";
|
|
|
|
interface PartCardProps {
|
|
part: Part;
|
|
selected?: boolean;
|
|
onSelect: () => void;
|
|
}
|
|
|
|
export function PartCard({ part, selected, onSelect }: PartCardProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onSelect}
|
|
className={`w-full text-left border rounded-md p-3 mb-2 transition
|
|
${
|
|
selected
|
|
? "border-amber-400 bg-zinc-900"
|
|
: "border-zinc-700 hover:border-zinc-500"
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-center gap-2">
|
|
<div>
|
|
<div className="text-sm font-semibold text-zinc-50">
|
|
{part.brand} <span className="font-normal">— {part.name}</span>
|
|
</div>
|
|
{part.notes && (
|
|
<p className="mt-1 text-xs text-zinc-400 line-clamp-2">
|
|
{part.notes}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="text-sm font-semibold text-amber-300 whitespace-nowrap">
|
|
${part.price.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|