basic seach small json data set models and parts

2025-11-24 12:51:14 +00:00
parent b064d458c4
commit ffe7ea5d75
58 changed files with 3006 additions and 81 deletions
@@ -0,0 +1,43 @@
+import Link from "next/link";
+
+export default function SearchResultCard({ item }) {
+  const isModel = !!item.categories; // Models have .categories
+  const href = isModel ? `/model/${item.id}` : `/part/${item.id}`;
+
+  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"
+    >
+      {/* Image */}
+      <img
+        src={placeholderImg}
+        alt={item.name}
+        className="rounded mb-4 w-full object-cover"
+      />
+
+      {/* Name */}
+      <h3 className="text-lg font-bold mb-1">{item.name}</h3>
+
+      {/* Type Tag */}
+      <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>
+
+      {/* Extra meta */}
+      <p className="mt-3 text-sm text-gray-500">
+        ID: <span className="font-mono">{item.id}</span>
+      </p>
+    </Link>
+  );
+}