53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import Link from "next/link";
|
|
|
|
export default function SearchResultCard({ item, bestScore }) {
|
|
const isModel = item.type === "model";
|
|
const href = isModel
|
|
? `/model/${item.slug ?? item.id}`
|
|
: `/part/${item.sku ?? item.id}`;
|
|
|
|
// Determine if this is the “best match”
|
|
const isBestMatch =
|
|
bestScore != null && item.score != null && item.score >= bestScore - 0.02; // 2% threshold
|
|
|
|
const placeholderImg = `https://placehold.co/400x250?text=${encodeURIComponent(
|
|
item.name
|
|
)}`;
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="block border rounded-xl p-5 shadow-sm hover:shadow-md hover:-translate-y-1 transition bg-white"
|
|
>
|
|
{/* Best Match Badge */}
|
|
{isBestMatch && (
|
|
<div className="inline-block mb-2 px-3 py-1 text-xs font-semibold bg-green-100 text-green-700 rounded-full">
|
|
Best Match
|
|
</div>
|
|
)}
|
|
|
|
<img
|
|
src={placeholderImg}
|
|
alt={item.name}
|
|
className="rounded mb-4 w-full object-cover"
|
|
/>
|
|
|
|
<h3 className="text-lg font-bold mb-1">{item.name}</h3>
|
|
|
|
<span
|
|
className={`inline-block px-3 py-1 text-xs rounded-full capitalize ${
|
|
isModel
|
|
? "bg-purple-100 text-purple-700"
|
|
: "bg-blue-100 text-blue-700"
|
|
}`}
|
|
>
|
|
{isModel ? "Model" : "Part"}
|
|
</span>
|
|
|
|
<p className="mt-3 text-sm text-gray-500 font-mono">
|
|
{isModel ? item.slug ?? item.id : item.sku ?? item.id}
|
|
</p>
|
|
</Link>
|
|
);
|
|
}
|